SvelteKit + Threlte 3D
The original Tostada experience — SvelteKit 2 + Threlte v8 for declarative Three.js. Pick this when you’re building a 3D game, a WebGL demo, or anything that wants the Threlte component syntax.
This is the default variant: npx tostada-cli create MyApp (no --variant flag) installs this one.
Install
npx tostada-cli create MyApp --variant sveltekit-threlte
# or simply
npx tostada-cli create MyApp What you get
In client/:
- SvelteKit 2 + Svelte 5 (runes)
- Threlte v8 (
@threlte/core,@threlte/extras) + Three.js 0.182 - A starter
Scene.sveltewith camera, lights, an example mesh +page.sveltemounts a<Canvas>with the scene- The same Vite proxy, adapter-static, and Phoenix socket helper as the other SvelteKit variants
In server/ and scripts/:
- The shared Phoenix backend
scripts/build-models.sh— converts GLTF/GLB assets inobj/into Svelte components
The Makefile gets two extra targets appended by the model-pipeline addon: make models.build and make models.clean.
Available addons
| Addon | Default | Notes |
|---|---|---|
threlte | on | Threlte runtime + starter Scene.svelte. Disabling removes deps and replaces the landing page |
model_pipeline | on | GLTF/GLB → Svelte component pipeline. Depends on threlte |
docker | off | Dockerfile + docker-compose |
Disabling both threlte and model_pipeline:
npx tostada-cli create MyApp --variant sveltekit-threlte --addons -threlte,-model_pipeline …produces a project equivalent to the plain sveltekit variant. Picking that variant directly is the cleaner path.
Verifying the install
cd MyApp
make db.setup
make dev Open http://localhost:5173 — the scene renders, the camera orbits, the mesh spins.
Building models
Drop .gltf or .glb files into obj/ at the project root, then:
make models.build This produces:
client/src/lib/models/generated/*.svelte— component-wrapped meshesclient/static/models/*.glb— runtime asset copiesclient/src/lib/models/generated-registry.ts— index export
See Model Pipeline for the full pipeline details.
What to build next
- Scene Management — managing 3D scene state with Svelte stores
- Tick Loop — animation timing with
useTask - Putting It Together — full multiplayer game walkthrough
- Physics recipe — scroll-driven physics demo