Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/theatre
  2. Getting Started


Getting Started

Theatre.js is a javascript animation library with a professional motion design toolset. It helps you create any animation, from cinematic scenes in 3D, to delightful UI interactions.

Before you get started with using @threlte/theatre, you should get comfortable with the concepts and terminology of Theatre.js itself by reading their documentation.


Code examples normally are embedded in the documentation itself. With examples using @threlte/theatre that's a bit different because the interface needs a large sceen. Therefore, the examples open in a new tab.


npm install @threlte/theatre @theatre/core @theatre/studio

Quick Start

To get started quickly, encapsulate your whole scene in the component <Theatre>.


The component <Theatre> provides a default <Project> and <Sheet> and implements <Studio>. For a more flexible structure please consider using <Project>, <Sheet> and <Studio> on their own.

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

		<Scene />

In your Scene, add the component <Editable> as a child of any component you'd wish to edit or animate. Add boolean props (~flags) to the component indicating which parent property you'd like to manipulate.


The property transform is a shortcut to add position, scale and rotation at once, the property controls enables comfortable THREE.TransformControls on the Object.

<script lang="ts">
	import { OrbitControls, T } from '@threlte/core'
	import { Editable } from '@threlte/theatre'
	import { DEG2RAD } from 'three/src/math/MathUtils'

<T.PerspectiveCamera position={[0, 5, 10]} makeDefault>
	<OrbitControls target={{ y: 1.5 }} />

<!-- Box -->
<T.Mesh receiveShadow castShadow position.y={0.5}>
	<Editable name="Box / Mesh" transform controls />
	<T.BoxGeometry args={[1, 1, 1]} />
	<T.MeshStandardMaterial color="#b00d03">
		<Editable name="Box / Material" color roughness metalness />

<!-- Floor -->
<T.Mesh receiveShadow castShadow rotation.x={DEG2RAD * -90}>
	<Editable name="Floor / Mesh" scale />
	<T.CircleGeometry args={[4, 60]} />
		<Editable name="Floor / Material" color roughness metalness />

<T.DirectionalLight position={[0.5, 2, 1]} castShadow>
	<Editable name="Lights / Main" color intensity transform controls />

<T.AmbientLight intensity={0.2}>
	<Editable name="Lights / Fill" color intensity />

You will now see the Theatre.js Interface. Make yourself comfortable with the controls and if you haven't done yet, please read the Theatre.js documentation.