threlte logo

Getting Started

The package @threlte/core is the core package of the Threlte framework. It provides the basic functionality of the framework, such as the <Canvas> and <T> components, and hooks to interact with the Threlte state.


npm install @threlte/core three @types/three


Every Threlte application must be wrapped in a <Canvas> component. This component is responsible for creating THREE.WebGLRenderer and providing a state for every child component.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'

  <Scene />

The main building block of a Threlte application is the <T> component. Use this component to instantiate any Three.js object available in the THREE namespace.

<script lang="ts">
  import { T } from '@threlte/core'

  position={[10, 10, 10]}
  on:create={({ ref }) => {
    ref.lookAt(0, 0, 0)

  <T.BoxGeometry args={[1, 1, 1]} />
  <T.MeshBasicMaterial color="red" />