<Project>

Theatre.js work is organized into projects that group animation <Sheet>s.

Projects also provide the means to inject configuration state exported as a JSON file from the <Studio> back into your code through a prop: <Project config={{ state }}>.

While multiple projects may be created, one is usually sufficient for a whole Threlte application.

Theatre.js Docs

Project | Project Manual | Project API Reference

Creating a Project

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

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

Loading a Saved State

The state of a project edited in the <Studio> is saved in your browser’s local storage, and can be exported from within the studio interface. It’s a JSON file containing all animated and static properties of all sheets of the project.

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

<!--
  Will create a project with the name "Project A",
  load its state and mount all children when
  finished loading
-->
<Project
  config={{ state }}
  name="Project A"
>
  <Sheet
    name="Sheet A"
    autoplay
  >
    <SheetObject key="ObjectA" />
  </Sheet>
</Project>

Component Signature

Props

name

type

required

default

---

config

IProjectConfig

no

---

name

string

no

default

Bindings

name

type

---

project

IProject

---

isReady

boolean