Built on top of Svelte and Three.js.
Scale with ease.
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>
Batteries included.
@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
<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>
<script>
import { GLTF, Float } from '@threlte/extras'
</script>
<Float>
<GLTF
castShadow
receiveShadow
url={'/models/flower.glb'}
position.y={1}
scale={3}
/>
</Float>
Fill the gap.
<T>
. But sometimes you need
more. Add custom props and custom events to <T>
with Plugins.
Documentation
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)
}
}
})
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.