Theatre.js v0.5 is out!
Theatre.js 0.5 introduces 3D scene editing, complex keyframing, and a new extension API
Friends, Theatre.js v0.5 is finally out! It comes with a brand new 3D editor and a new set of tools for animating complex scenes.
If you're new here: Theatre.js is a hackable animation library with visual tools. Learn more here.
Now let's talk about what's new!
A hackable 3D editor
We've been building a 3D editor for existing React Three Fiber projects. It's an extension of Theatre.js. We call it
You can use it by wrapping your React Three Fiber JSX tree with a
And prepend your editable objects with
Now switch to the browser, and voila! We have a 3D editor driven by your React Three Fiber code!
All your editable objects are selectable, so you can move them around and change their props. Standard THREE.js objects have default bindings, so for example, lights get an
intensityprop and fogs have
And you can extend the defaults with custom props:
There are two ways to edit your 3D object's props: directly manipulate them in the 3D editor or tweak and fine-tune them in the prop editor.
You can follow this quick Theatre.js R3F tutorial to get started.
@theatre/r3fis just an extension. We have more extensions in the works, and you can also roll your own!
New ways to animate
When the original Theatre.js came out, it could only animate one track at a time and that track could only have numeric props. We were actually pretty embarrassed by how bare bones it was 😅
Almost immediately, teams started using Theatre.js to drive game cinematics, audiovisual experiences, and interactive articles. Some of these projects have hundreds of keyframed tracks choreographed together. Animating such large scenes is doable but painful. So, for v0.5 we wanted to address some of the most painful of these pain points...
For starters, we made all props types sequenceable. Booleans, switches, and even strings are animatable now; and you can customize their interpolation functions too.
Keyframe values can now be edited inline, saving you seconds on each edit.
Theatre.js's multi-track editor is great for animating related values with fine-grained detail. The new tween editor adds to that by letting you control several tweens at once.
Plus it comes with presets for the most common easing curves (thank you, Michael Anthony!)
And the fuzzy-matched search saves you a few seconds if you know the name of the preset you're looking for.
You can now drag keyframes in tracks that have child tracks to drag all the child track keyframes at once.
Sync things even more with sequence-wide markers.
If you have a long animation, you may want to focus playback on a short range of the sequence while you get it right. The new focus range makes that easy.
As is always the case with the sequence editor, everything snaps!
Multi-track selections and copy/paste are here.
Oh, and we added a color prop, with a twist! It interpolates colors in the Oklab color space. So, you don't have to make multi-point gradients to make your color transitions look natural:
The extension API
You can now call the same extension API used by
@theatre/r3fto build editing tools for your stack; no matter if you use SVG, D3.js, or even a custom WebGL engine. Follow our Authoring Extensions Guide to get started making your own extensions to the Theatre.js Studio.
This release comes with a bunch of DX/UX quality-of-life improvements, more tools for navigating larger projects, bug fixes for Windows, better compatibility with the rest of the JS ecosystem, new docs, and perf optimizations. Read more about all the changes on the releases page.
v0.5 was a big release with a lot of help from our contributors. We want to help everyone who helped implement features and fixes and gave us feedback.
- Mariusz Wnęk
- Fülöp Kovácks
- Cole Lawrence
- Michael Anthony
- Don McCurdy
- Or Fleisher
- Tyler Sammy
- Thieb Delaporte-Richard
- Jørn Myrland
- Yuri Artiukh
- Dan Voyce
- Nikhil Saraf
- Colin Duffy
- Marcel Weissler
If you are interested in helping improve Theatre.js, we invite you to join the Theatre.js Discord and look for the
#contributingchannel to get started helping with design, implementation, docs, or bug fixes. You can also
#helpothers, write or record tutorials, create extensions, or just hang out with us on
Til the next release!