1. @threlte/theatre
  2. Getting Started

@threlte/theatre

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.

INFO

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.

Installation

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

Quick Start

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

TIP

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.

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

<Canvas>
	<Theatre>
		<Scene />
	</Theatre>
</Canvas>

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.

TIP

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

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

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

<!-- 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 />
	</T.MeshStandardMaterial>
</T.Mesh>

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

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

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

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.