Skip to content
Threlte

<Sheet>

Theatre.js sheets contain one or more Theatre.js objects and optionally a <Sequence> component that allows controlling the animation. The animated objects can adjusted in the <Studio> using the <Editable> component.

Theatre.js Docs

Section titled “Theatre.js Docs”

Sheet | Sheet Manual | Sheet API Reference

Creating Sheets

Section titled “Creating Sheets”

You can create a sheet by placing the component <Sheet> as a child of a <Project> component. If a sheet with the given name already exists, it will represent the existing sheet instead of creating a new one.

<script>
  import { Project, Sheet, SheetObject } from '@threlte/theatre'
</script>


<Project>
  <!-- Will create a sheet with the name "Sheet A" -->
  <Sheet name="Sheet A">
    <SheetObject key="ObjectA" />
  </Sheet>


  <!-- Will create a sheet with the name "Sheet B" -->
  <Sheet name="Sheet B">
    <SheetObject key="ObjectB" />
  </Sheet>


  <!-- Will NOT create a sheet but reference "Sheet A" -->
  <Sheet name="Sheet A">
    <SheetObject key="ObjectC" />
  </Sheet>
</Project>

Playing a Sheet’s animation

Section titled “Playing a Sheet’s animation”

Each Theatre.js sheet has a sequence attached to it. The sequence is the heart of the Theatre.js API: it determines where we are in the animation timeline, and provides and API to play and pause the animation in a variety of ways.

Using the <Sequence> component

Section titled “Using the <Sequence> component”

The first way to control the sequence is using a reactive API with the <Sequence> component.

Component Signature

Section titled “Component Signature”

Props

name
type
required
default
instance
string | undefined
no
undefined
name
string
no
default

Bindings

name
type
project
IProject
sheet
ISheet