Threlte Addon

The Threlte addon sets up Threlte v8 — a declarative Three.js framework for Svelte 5.

What it includes

• @threlte/core and @threlte/extras packages
• A starter Scene.svelte component with camera, lights, and an example mesh
• TypeScript types for Three.js (@types/three)

Scene structure

Threlte v8 uses the T.* component syntax:

<script>
  import { T, useTask } from '@threlte/core';

  let rotation = $state(0);

  useTask((delta) => {
    rotation += delta;
  });
</script>

<T.Mesh rotation.y={rotation}>
  <T.BoxGeometry />
  <T.MeshStandardMaterial color="#e91e8c" />
</T.Mesh>

Key differences from Threlte v7:

• T.* components replace lowercase elements (<T.Mesh> not <mesh>)
• useTask((delta) => {}) replaces useFrame
• bind:ref={mesh} replaces bind:this={mesh}

Canvas setup

Your Canvas component wraps the scene and provides the Three.js context:

<script>
  import { Canvas } from '@threlte/core';
  import Scene from './Scene.svelte';
</script>

<Canvas>
  <Scene />
</Canvas>

Scene logic must be in a child component of <Canvas>, not in the same component.

Disabling the addon

If your project doesn’t need 3D rendering:

npx tostada-cli create MyApp -threlte

This removes all Three.js and Threlte dependencies and the starter scene files.