Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/theatre
  2. Project

@threlte/theatre

Project

All your work in Theatre.js is organized into projects. Projects are a way to organize related work.

Theatre.js allows you to save the state of a project and load it via <Project config={{ state }}>. We can create multiple projects, but often one project is sufficient for a whole threlte application.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Creating a Project

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

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

Loading a Saved State

The state of a project can be saved from the interface provided by <Studio>. It's a JSON file containing all animated and static properties of all sheets of the project.

<script>
	import { Project, Sheet, Editable } 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>
		<Editable name="Editable A" />
	</Sheet>
</Project>

Previous <- Studio