Welcome to Threlte.

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}
  onclick={() => {
    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 type-safe Plugins that can hook into every aspect of Threlte's render component.

Documentation

look-at-plugin.ts

import { injectPlugin } from '@threlte/core'

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

  return {
    pluginProps: ['lookAt']
  }
})

^{Start your Journey}

Don't take our word for it.

Amr

Freelancer web developer

I built 3 webGL apps using threlte and it's amazing <3

Aria Minaei

Creator of Theatre.js

[Regarding Threlte] Absolutely the best API and devX for Theatre.js [...] I'm so excited for this!

Matthias Stahl 🇪🇺

I am a designer creating knowledge through data visualization.

🧑‍💻 First experiments using threlte for Svelte. After I didn't succeed using svelte-cubed, threlte seems to be a rather well-documented and good working declarative THREE library for Svelte. Many thanks to @a_warnes and @Reyfenberg!

Rich Harris

Creator of Svelte.

indeed — threlte is where it's at. i should get round to updating the svelte cubed repo/site to make that clearer

shiva

Computer Science + Art student @Carnegie Mellon

threlte, which combines threejs and svelte, is easily one of my new favorite libraries

Shiyun 诗韵

Globalist, learner, software engineer

My first try at writing shaders in threejs .. used the FBO particles technique to explore Chinese characters that have "女" (woman) as a component in them.. OMG it's so challenging! The new @threlte, made it easier though 🤓

Vatroslav Vrbanić

Creator of svelthree and svelte-accmod

I'm impressed by all the features of threlte.xyz, it's well polished / feels complete. Still, svelthree is different in many ways, and I think it's good to have alternatives. After 1.0.0-next.1, I'll have to dive deeper into threlte and compare/test it extensively.

Getting Started

Join the Threlte Community.

Discord