Rapidly build interactive
3D apps for the web.
Built on top of Svelte and Three.js.
>npm i @threlte/core@next
three
Get Started
<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.
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/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>Plugins
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)
}
}
})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
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.
give threlte.xyz a whirl. not as mature as the r3f ecosystem, but already pretty capable
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.