https://www.theatrejs.com/blog/theatre-05-is-out

Theatre.js
DocsBlogJobs
GithubDiscord

Theatre.js v0.5 is out!

Theatre.js 0.5 introduces 3D scene editing, complex keyframing, and a
new extension API

[]Announcing Theatre.js v0.5Announcing Theatre.js v0.5
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 @theatre/r3f.
You can use it by wrapping your React Three Fiber JSX tree with a
<SheetProvider>:
Scene.jsx

import { SheetProvider } from '@theatre/r3f'
export default function Scene() {
return (
<Canvas camera={{ position: [5, 5, -5] }}>
<SheetProvider sheet={demoSheet}>
<pointLight position={[10, 10, 10]} />
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="orange" />
</mesh>
</SheetProvider>
</Canvas>
)
}

And prepend your editable objects with editable.:
Scene.jsx

import { SheetProvider, editable } from '@theatre/r3f'
export default function Scene() {
return (
<Canvas camera={{ position: [5, 5, -5] }}>
<SheetProvider sheet={demoSheet}>
<editable.pointLight
theatreKey="Lighting / Primary Source"
position={[10, 10, 10]} />
<editable.mesh theatreKey"The Box"">
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="orange" />
</editable.mesh>
</SheetProvider>
</Canvas>
)
}

Now switch to the browser, and voila! We have a 3D editor driven by
your React Three Fiber code!
Video showing a three dimensional scene with objects being moved
around.
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 intensity prop and fogs have
near and far planes:
Video showing a steampunk-inspired setting with objects in the
background fading in and out as the fog's far plane moves closer and
farther away.
And you can extend the defaults with custom props:
Lighting.jsx

export default function Lighting() {
return (
<e.ambientLight
theatreKey="Lighting / Base"
additionalProps={{
secondaryColor: types.rgba(),
bloomContribution: 3.4,
}}
/>
)
}

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.
Video showing a 3D scene with a flying butterfly whose position/
rotation is being controlled by a set of keyframes in a sequence
editor.
You can follow this quick Theatre.js R3F tutorial to get started.
@theatre/r3f is 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.
TODO
Keyframe values can now be edited inline, saving you seconds on each
edit.
TODO
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.
TODO
Plus it comes with presets for the most common easing curves (thank
you, Michael Anthony!)
TODO
And the fuzzy-matched search saves you a few seconds if you know the
name of the preset you're looking for.
TODO
You can now drag keyframes in tracks that have child tracks to drag
all the child track keyframes at once.
TODO
Sync things even more with sequence-wide markers.
TODO
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.
TODO
As is always the case with the sequence editor, everything snaps!
TODO
Multi-track selections and copy/paste are here.
TODO
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:
TODO

#The extension API

You can now call the same extension API used by @theatre/r3f to 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.

#And more

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.

#Thank you

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 Wnek
  * Fulop Kovacks
  * Cole Lawrence
  * Michael Anthony
  * Don McCurdy
  * Or Fleisher
  * Tyler Sammy
  * Thieb Delaporte-Richard
  * @coryg-looh
  * Jorn Myrland
  * @RuiOrey
  * Yuri Artiukh
  * @PaleHazy
  * Dan Voyce
  * Nikhil Saraf
  * Colin Duffy
  * Marcel Weissler
  * @SteamOr

If you are interested in helping improve Theatre.js, we invite you to
join the Theatre.js Discord and look for the #contributing channel to
get started helping with design, implementation, docs, or bug fixes.
You can also #help others, write or record tutorials, create
extensions, or just hang out with us on #chat 
Til the next release!
Aria MinaeiAria Minaei

Aria Minaei

@ariaminaei
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.

Get started with

  * React Three Fiber
  * THREE.js
  * HTML/CSS/SVG

Docs

  * Overview
  * Concepts
  * Getting started
  * Manual
  * API

Community

  * Twitter
  * Discord
  * GitHub

Company

  * Jobs
  * Blog
  * Contact

(c) 2022 Theatre.js Oy - Helsinki.