@threlte/theatre

<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

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

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

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

Using the useSequence hook

xxx