threlte logo
A 3D framework for the web.
Built on top of Svelte and Three.js.
Declarative Components

Scale with ease.

Threlte lets you use every feature of Three.js in a declarative way. Compose your scene with Threlte's render components and let Threlte handle the rest.
Leverage the lifecycle of Svelte components to subscribe to events, handle state changes and more.
Make Your First Scene
<T.Mesh
  scale={2}
  position.x={10}
  on:click={() => {
    console.log('click!')
  }}
>
  <T.BoxGeometry args={[1, 1, 2]} />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>
Community driven

Batteries included.

Threlte comes with integrations for Rapier, a best-in-class physics engine, Theatre.js, an animation library with a professional motion design toolset and @threlte/gltf, a tool to transform GLTF files into Threlte components.

On top of that @threlte/extras provides a collection of useful components and utilities to get you started.
Documentation
@threlte/rapier
<script>
  import { RigidBody, AutoColliders } from '@threlte/rapier'
  import { T } from '@threlte/core'
</script>

<RigidBody>
  <AutoColliders shape={'ball'}>
    <T.Mesh receiveShadow castShadow>
      <T.SphereGeometry args={[0.25]} />
      <T.MeshStandardMaterial />
    </T.Mesh>
  </AutoColliders>
</RigidBody>
@threlte/extras
<script>
  import { GLTF, Float } from '@threlte/extras'
</script>

<Float>
  <GLTF
    castShadow
    receiveShadow
    url={'/models/flower.glb'}
    position.y={1}
    scale={3}
  />
</Float>
Plugins

Fill the gap.

A single component is at the core of Threlte: <T>. But sometimes you need more. Add custom props and custom events to <T> with Plugins.
Documentation
look-at-plugin.ts
import { injectPlugin } from '@threlte/core'

injectPlugin('lookAt-plugin', ({ ref, props }) => {
  if (!ref.lookAt) return
  if (props.lookAt) ref.lookAt(props.lookAt)

  return {
    onPropsChange: ({ props }) => {
      if (props.lookAt) ref.lookAt(props.lookAt)
    }
  }
})
Start your Journey

Don't take our word for it.

Join the Threlte Community.

Discord