@threlte/theatre
<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>