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.

Installation

Terminal

npm install @threlte/core three @types/three

Usage

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.

App.svelte

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

<Canvas>
  <Scene />
</Canvas>

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.

Scene.svelte

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

<T.PerspectiveCamera
  position={[10, 10, 10]}
  oncreate={(ref) => {
    ref.lookAt(0, 0, 0)
  }}
/>

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