Import .gLTF animation to THREE.js

1
votes

I used Blender to create a 3D object with simple animation, then I export it as .gLTF file, I tried to import to THREE.js, but I only able to import the 3D object but can't load the animation, how can I load the animation to Three.js?

1
three.jsblendergltf

1 Answers

3
votes

The most basic code for playing an animation looks like so:

loader.load( 'models.glb', function ( gltf ) {

    var model = gltf.scene;
    var animations = gltf.animations;

    scene.add( model );

    //

    mixer = new THREE.AnimationMixer( model );

    var action = mixer.clipAction( animations[ 0 ] ); // access first animation clip
    action.play();

} );

You then have to ensure to update the instance of AnimationMixer in your animation loop like so:

var delta = clock.getDelta(); // clock is an instance of THREE.Clock
if ( mixer ) mixer.update( delta );

Check out webgl_animation_skinning_blending to see this code in action.

three.js R109