Features
Yes, there are already three.js component libraries for svelte, however threlte is different in some ways:
Sensible defaults
Much like
react-three-fiber, threlte will set sensible defaults to three.js WebGLRenderer
, all colors and textures and more. This makes it easy for you to follow best practices in terms of color reception and accuracy.
threlte also makes visibility management a breeze with its <Layers>
component.
Unified frame loop
By default, threlte only renders the scene if there's need for it: If a prop changes that makes rendering the scene necessary, if there are any interactive objects in the scene or if threlte or you use useFrame
in any of your components.
Interactivity
threlte makes it possible to use events on three.js objects as if they were regular DOM elements:
<Mesh … interactive on:click={onClick}>
You can also listen to your object leaving or entering the viewport:
<Mesh … viewportAware on:viewportenter={onViewportEnter}>
TypeScript
All threlte components are written in TypeScript, so type support is a first-class citizen.
EffectComposer support
Add a Pass with
<Pass pass={new GlitchPass()} />
and threlte will take care of setting up the default RenderPass
and render to the EffectComposer
instead of the WebGLRenderer
.
Text rendering
Render text using the fantastic
troika-three-text library with:
<Text text="Hello World" />
Access All Areas
- Bind to three.js object instances
<Mesh … bind:mesh>
- Access the renderer
const { renderer, invalidate } = useThrelte()
Easily extendable
Build objects that didn't yet make it to threlte yourself by plugging together functional components (as in they do one thing and do it well).
Tree-shakeble
react-three-fiber is great at making it possible to use three.js classes as JSX components. This means that there is no hard dependency on a certain three.js version and everything that is possible in three.js is covered with react-three-fiber as well. There is however a downside: react-three-fiber looks up three.js classes at runtime. This means that even if your react-three-fiber app only uses a fraction of three.js, you will need to ship three.js in its entirety.
threlte does not look up three.js classes at runtime and as such is limited in features compared to three.js itself. It tries however to cover most use cases of three.js and provides functional components to make extending threlte as easy as possible. As such, your bundler is able to tree-shake threlte and (
somewhat) limit what parts of three.js get shipped. To further reduce the bundle size, see
this comment.
Does not get in your way
Everything is accessible. Objects are instantiated without any default values, so that threlte will not get in your way of setting up or altering objects manually while also relying on the defaults set by three.js.