Play mixer animation at a specific time ( playAt() or skipTo() )

Question

I have a basic mesh animation in a .gltf that I want to play at a specific time in seconds.

Here's the loader and mixer setup:

GLTFLoader.load( 'myscene.gltf', function ( gltf ) {

    model = gltf.scene;
    scene.add( model );

    mixer = new THREE.AnimationMixer( model );
    mixer.clipAction(gltf.animations[0])
        .setDuration( 60 ) //total of 1 min
        .play(); 

    render();
});

In render() I have:

function render() {

        var delta = clock.getDelta();

        if (mixer != null) {
            mixer.update(delta);
        };

        //console.log(delta); //Doesn't show anything valuable.

        renderer.clear();
        composer.render();
        counter++;
}

So far I tried with .startAt(10) which is just a delay before playing. It should really be renamed to .delay(). startAt() should be what I'm looking for. I've also tried with .play(10) which doesn't work. mixer.time does return the actual time ellapsed since play in seconds but it cannot be set to anything.

I don't understand the whole clock.getDelta() thing and how does it know what to play since the numbers seem to repeat. How do I make the animation start at say 10 second in the animation... or specific keyframe number maybe?

Answer 1

When you call .clipAction(), you get an object of AnimationAction type, which you can use to chain commands (as you did in your example above). Instead of chaining, you can store this in a variable, and then use the .time property of AnimationAction to tell it where to start.

var mixer = new THREE.AnimationMixer( model );
var action = mixer.clipAction( gltf.animations[ 0 ] );
action.setDuration( 60 )
action.play();
action.time = 5;

You can read more about the .time property in this page of the docs.