It's develop for Theater.js 0.6.0
It is a module for Theatre.js which allows you to import animation into timeline from a GLTF file.
- Create the studio and register the extension
- Import event extension
- Import model and call event
GLTFAnimEvent(<animations gltf>)
. - In
Studio
project a sub tabGLTF Animations Tracks
will appear with animated elements.
Knowledge of Bugs: [ ] You need to enable 'Sequence all' so that the script can reassign animation to the selected properties. [x] When reloading the page, the bind is not saved. [x] Re-order position axies on import animation
Theater.js bugs: 1) Activate secquence for some object: theatre-js/theatre#352
Videos Samples
You can see it browsing _videos
folder.
- run
npm i @theatre/extensions-animations
main file
import animationsExtension from "theatre-extensions-animations";
...
studio.extend(animationsExtension);
studio.initialize();
...
Example with useLoader
+ drei
project file
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useLoader } from "@react-three/fiber";
import { useAnimations } from "@react-three/drei";
...
import { GLTFAnimEvent } from "theatre-extensions-animations";
...
//function in react
function Scene() {
const gltf = useLoader(GLTFLoader, "/test_animation.glb");
if (gltf) GLTFAnimEvent(gltf);
return <primitive object={gltf.scene} />;
}
...
//JSX
<Canvas>
{/* ... */}
<color attach="background" args={["#ccc"]} />
<OrbitControls />
<Scene /> {/*import model*/}
</Canvas>
If you want to collaborate, you can create a pull request
or you can comment it in the issue
section.
* https://www.theatrejs.com/docs/latest/manual/authoring-extensions