| title | Concepts |
|---|---|
| excerpt | (TODO) |
{/* TODO borrowing the idea of a "concepts" page from liveblocks. /} {/ Initial copy borrowed described by Aria in https://www.figma.com/file/MAS8RASgS67Hxfs80blndK/Website?node-id=703%3A29236 /} {/ Everyone seems to have trouble seeing what a "sheet" and "object" and "instance" is. /} {/ Maybe an animated illustration for each could make them easy to understand? */}
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.
{/* When you create an object using sheet.object(name, props), you'll be adding the object to the animation sequence. */}
{/* Maybe an animation here where the "objects" in the animation are highlighted? /} {/ Also, probably a good place to communicate that objects can represent anything, from 3D objects to HTML elements. /} {/ We can probably drive the point further by saying that you could even have dummy objects that don't represent anything on the scene. */}
Objects are made up of props. Each prop can have a different type and can be sequenced.
Props can be changed via Theatre's UI or via code.
{/* It's probably a good opportunity to show the user that props can change via Theatre's UI (like the one in DetailsPanel), via a custom UI (like the editing gizmos in the r3f extension), and programattically. */}
{/* Maybe a small animation here that shows a ball moving from left to right, and its "x" prop changing? */}
Sheets contain one or more objects that can be animated together.
{/* An animation with multiple objects animated together (like a tennis racket hitting the tennis ball). /} {/ We could then highlight that the two objects are in the same sheet. */}
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.
{/* Maybe several instances of the above animation playing at different positions, to demonstrate that sheet instances are just the same sheet with independent positions. */}
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.
{/* Right now, sheets and sequences are pretty much the same thing, so it's not even clear to the user what's the difference between the two. /} {/ A previous version of Theatre.js didn't even have sheets and just had sequences. /} {/ The reason we have two words for them, is that in the future, a sheet can house several sequences, so the same set of objects can have several separate animations, like a button having an animation for being hovered, and clicked, or a human having a jump animation and a crouch animation. */}
{/* Users intuitively know that the same object could have several different animations. /} {/ So the user could ask herself "how would i define several animations for the same set of objects?" /} {/ Also, if they're the kind that's easily discouraged (like me), they may already take that question as "it's not possible to define separate animations" and just close the page. */}
{/* Perhaps the best thing we can do here is to show that we know this use-case is essential, and tell the user that multi-sequence sheets are coming, and in the meantime, they can divide a sequence into different sections to achieve (like [10s-30s] is one section, then [30s-40s] is another). */}
Extensions can make creating and editing objects for your animation much easier. They can provide editor gizmos, toolbars, and even their own panes.
{/* Perhaps we can also show the "snapshot" button and the snapshot editor coming from an extension? */}
{/* ## Concepts not to explain */}
{/* I think we can skip explaining projects and prop types here. They're probably not that complicated to grasp. */}