theatre
theatre copied to clipboard
Feature request: Load entire existing three.js scene into theatre sheet
This would serve two purposes:
- makes it easy to use theatre for reviewing animated files that have been created elsewhere (e.g. Babylon Sandbox has a pretty unusable animation sheet, theatre could improve upon that)
- makes it easy to stresstest with real-world files and hundreds/thousands of keyframes.
Also curious about pointers to dabble with the above if this is out of scope :)
There's a fair bit of code in the theatre/r3f package that generates theatre 'editable' types (i.e., the glue code setting up theatre scene hierarchy UI and property controls, which you'd need to start animating a scene) from R3F objects. It could be applied to vanilla three.js objects with syntax like <e.primitive object={object} editableType={object.type} />
in most cases, by traversing the scene, but is React-dependent.
I wonder if you don't strictly want to load a scene so much as an existing animation clip, though? Probably also with the goal of making changes and exporting the result back to a THREE.AnimationClip or a glTF file? I don't know enough about the internal representation of keyframes in theatre to guess how well this would work, though. glTF allows STEP, LINEAR, and CUBICSPLINE interpolation modes, with the latter being more constrained (for runtime purposes) than Blender or theatre.js' more flexible Bezier handles. There's a good thread on the differences here: https://blender.stackexchange.com/questions/269337/what-b%c3%a9zier-animations-can-be-safely-exported-to-gltf
Another idea would be to write some code that syncs theatre.js keyframes to/from a glTF-Transform AnimationSampler object — then hooking up animation support in gltf-transform/view, which I unfortunately haven't gotten around to yet. With that approach you'd have a pretty good workflow to read a glTF, do some keyframe animation, and export back to glTF losslessly. But probably a bit outside the scope of theatre.js itself. :)