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.svelte with camera, lights, an example mesh
  • +page.svelte mounts 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 in obj/ into Svelte components

The Makefile gets two extra targets appended by the model-pipeline addon: make models.build and make models.clean.

Available addons

AddonDefaultNotes
threlteonThrelte runtime + starter Scene.svelte. Disabling removes deps and replaces the landing page
model_pipelineonGLTF/GLB → Svelte component pipeline. Depends on threlte
dockeroffDockerfile + 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 meshes
  • client/static/models/*.glb — runtime asset copies
  • client/src/lib/models/generated-registry.ts — index export

See Model Pipeline for the full pipeline details.

What to build next