Concepts

Objects

Everything that is animated is represented as an object. Objects can be THREE.js objects or virtual objects that don't exist on the screen.

Props

Objects are made up of props. Each prop can have a different type and can be sequenced.

An annoted screenshot of the Theatre.js Studio UI next to a cube with an axis overlayed. The annotation draws a line between the y axis and an input labelled y in the UI, as well as a line between the width of the cube and an input labelled width in the UI.

Changing props

Props can be changed via Theatre's UI or via code.

Sheets

Sheets contain one or more objects that can be animated together.

Sheet instances

You can re-use a sheet by making instances of it. That means we can have more than one jumpidy-jump animation, each with its own little box and dust particles.

Sequences

Each sheet has a single sequence (multi-sequence sheets are in the works!). A sequence is basically made up of all of the keyframes of all of the objects in a sheet.

Extensions

An annotated screenshot of the Theatre.js Studio UI. Annotations show 'The extension button in the toolbar', 'The extension pane', and 'The editing gizmo just for R3F objects'

Extensions can make creating and editing objects for your animation much easier. They can provide editor gizmos, toolbars, and even their own panes.


Was this article helpful to you?

Last edited on November 30, 2022.
Edit this page

Theatre.js
Theatre.js is a design tool in the making. We aim to blur the line between designer/developer, author/consumer, and artist/scientist.
© 2022 Theatre.js Oy – Helsinki.