Theatre.js 0.5 - Animate THREE.js scenes in the browser

Theatre.js is an open-source and hackable motion design library with a visual interface. It helps you animate THREE.js scenes, SVG trees, or even choreograph light shows.
Homepage - www.theatrejs.com
Docs - www.theatrejs.com/docs
Twitter - / theatre_js
Discord - / discord

[@adamherman5859]

just got this in my recommended and omg this is the perfect tool seriously, starting asap

[@Jake-bh1hm]

This is awesome!!! Thank you 🙏 this will save so much time

[@dinoscheidt]

Very neat - thanks for popping up in my video recommendations ❤

[@SamSepiol127]

jeez this seems AMAZING...I have to give it a try! Thank you for sharing!

[@AndyNorth]

Great job! Thank you very much. this will help me out to make cinematic camera for opening or ending of my game.

[@user-ni5qn1oi6z]

Great plug-in 👍

[@maxziebell4013]

You really have been at work ...🤯… greetings from Berlin to Berlin 🤓

[@adrianooo3658]

This is great! Thanks.

[@mahdisoultana4926]

thank you very much for this helpful tutorial i wish if you had more recent animation tutorial with theatre.js

[@afrosymphony8207]

first time hearing about this...holy shit its amazing

[@vinaciotm]

OMG, SO AMAZING

[@NandoSangenetto]

Amazing!

[@--bountyhunter--]

HOOOLLLYYYYYY MOOOLLYYY!!!!

[@imbateam]

very nice! I will use this for my project :)

[@torrentz4life392]

Please do more tutorials involving react three fiber. Even shorts would be great.

[@rizzbod]

Amazing

[@chibapu]

what is the contentof setup scene?, where are you getting this initial scene/object?, did you put a repo with the example ?

[@markopolo2224]

im sorry this is just so cool

I noticed that the camera can be moved with the gizmo, is there something similar to Blender where you can manipulate the camera freely with WASD? There's also another mode in Blender where the camera falls with gravity and uses the floor to walk like in a FPS. Congrats, amazing work.

[@trebaltek]

import { editable as e, SheetProvider, } from '@theatre/r3f' than add const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera') in the canvas add

[@0GRANATE0]

is it possible to pause/play the animation?

[@wisdomcube7789]

holy shizz, i need this

[@Danjovisagat]

Im inspired I wanna see what others have made, my only idea is a nice menu before launching a game.

[@asmaniya8977]

что за панель у него справа и слева ?: what a panel the creator has at left an right of the screen ?

[@alvarobyrne]

long time no .... animate

[@markopolo2224]

looks interesting as fuck

[@Ando_Figueroa]

NOOOOOICE!!

[@trebaltek]

where can i get a example of this code, im having issues overriding the defuat camera in react three fiber. i can get everything to show up to edit in the r3f ui. but im unable to make the camera in the r3f ui that i can move around in my snap shot as my default camera and if i makeDefault in the tag everything stops working

[@simikite]

Have this issue too, any update?

[@trebaltek]

@@simikite import { editable as e, SheetProvider, } from '@theatre/r3f' than add const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera') in the canvas add

[@trebaltek]

to make the orthographic camera editable replace perspective with orthographic in the const statement.

[@trebaltek]

dont forget to import { PerspectiveCamera, OrthographicCamera, } from '@react-three/drei' and remove any camera attached to the canvas.

[@trebaltek]

@@simikite oh ya if you want the canvas view to show up in the top right corner of snapshot view add this to the canvas and use directional lighting if you want the light to follow the object no matter where it moves in the canvas. spotlight is for areas you want to light up more.

[@mml42]

Not looks like for Software Developers , more for designers who has skills in 3d editors

[@trebaltek]

its to visually see your animations without coding all the movements and just pull them from a json file... coding animations kills productivity trying to get perfect movement. this is for coders who need a quicker and better outcome when animating, this can take many hours of coding away which is a plus..

[@deletrious]

incorrect.

[@HalkerVeil]

What even is this? Why not just use Blender or Maya?

[@trebaltek]

this is for animating for web. you cant just plop an animation in a web browser from blender and expect it to work. this is for threejs and react three fiber web designers

[@edenassos]

Another brain-deceased more on.

[@edenassos]

Another empty between the ears more on.

[@HalkerVeil]

@@edenassos Sorry but if this is another web3 thing then your comment is correct. The amount of times we have heard Web3 in the industry and literally nobody uses it outside of experimentation and that one or two niche websites nobody goes to...

[@edenassos]

@@HalkerVeil If you don't dev, just don't say a word, your opinion is not needed. Stick to your blender like the amateur you are.