threlte.xyz Open in urlscan Pro
76.76.21.21  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Documentation Services



The Mission:


RAPIDLY BUILD INTERACTIVE

3D APPS FOR THE WEB.

>npm create threlte

Start Building →


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

Copy

<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
Copy

<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
Copy

<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
Copy

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

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


Threlte is a 3D framework for Svelte.
© 2023

 * Get Started
 * Install
 * Concepts
 * Reference

 * Community
 * Twitter
 * Discord
 * GitHub