threlte logo

Rapidly build interactive
3D apps for the web.

A 3D framework for the web.
Built on top of Svelte and Three.js.
>npm i @threlte/core@next three
Get Started
Write clear, declarative and type-safe components that seemlessly react to state changes and are ready to be interactive.
<Canvas>
  <T.PerspectiveCamera
    makeDefault
    position={[-10, 10, 10]}
    fov={15}
  >
    <OrbitControls
      autoRotate
      enableZoom={false}
      enableDamping
      autoRotateSpeed={0.5}
      target.y={1.5}
    />
  </T.PerspectiveCamera>

  <T.DirectionalLight
    intensity={0.8}
    position.x={5}
    position.y={10}
  />
  <T.AmbientLight intensity={0.2} />

  <Grid
    position.y={-0.001}
    cellColor="#ffffff"
    sectionColor="#ffffff"
    sectionThickness={0}
    fadeDistance={25}
    cellSize={2}
  />

  <ContactShadows
    scale={10}
    blur={2}
    far={2.5}
    opacity={0.5}
  />

  <Float
    floatIntensity={1}
    floatingRange={[0, 1]}
  >
    <T.Mesh
      position.y={1.2}
      position.z={-0.75}
    >
      <T.BoxGeometry />
      <T.MeshStandardMaterial
        color="#0059BA"
      />
    </T.Mesh>
  </Float>

  <Float
    floatIntensity={1}
    floatingRange={[0, 1]}
  >
    <T.Mesh
      position={[1.2, 1.5, 0.75]}
      rotation.x={5}
      rotation.y={71}
    >
      <T.TorusKnotGeometry
        args={[0.5, 0.15, 100, 12, 2, 3]}
      />
      <T.MeshStandardMaterial
        color="#F85122"
      />
    </T.Mesh>
  </Float>

  <Float
    floatIntensity={1}
    floatingRange={[0, 1]}
  >
    <T.Mesh
      position={[-1.4, 1.5, 0.75]}
      rotation={[-5, 128, 10]}
    >
      <T.IcosahedronGeometry />
      <T.MeshStandardMaterial
        color="#F8EBCE"
      />
    </T.Mesh>
  </Float>
</Canvas>

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.
Learn More
<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