Theatre.js v0.5 is out!

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!

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:

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.

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.

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/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.

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 Minaei

@ariaminaei

#A hackable 3D editor

#New ways to animate

#The extension API

#And more

#Thank you

Get started with

Docs

Community

Company