verify when a clipAction animation finished playing in three.js

Question

I’ve made an animated mesh in Blender containing two animations clips that I named intro and idle. I’ve export it with the Blender exporter in JSON. Everything works great. I can toggle which animation I want to play. My problem is that I want to play the first animation entirely and then switch to the second animation that I’ll set to loop.

Here is the parts of the code I use for the JSON and animation part :

var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load('models/feuille(19fevrier).json',
    function (geometry, materials) {

        mesh = new THREE.SkinnedMesh(geometry,
            new THREE.MeshLambertMaterial({
            skinning: true
        }));

        mixer = new THREE.AnimationMixer(mesh);

        action.intro = mixer.clipAction(geometry.animations[ 0 ]);
        action.idle = mixer.clipAction(geometry.animations[ 1 ]);

        action.intro.setEffectiveWeight(1);
        action.idle.setEffectiveWeight(1);
        action.intro.enabled = true;
        action.idle.enabled = true;

        action.intro.setLoop(THREE.LoopOnce, 0);


        scene.add(mesh);

        scene.traverse(function(children){
            objects.push(children);
        });

        action.intro.play();

    });

What I was looking for is a function that tells me that the action is complete, somethings like onComplete event when a clipAction finished playing. I found this response on the three.js GitHub :

 mesh.mixer.addEventListener('finished',function(e){

   // some code

 });

It seems to work but I don’t really understand the addEventListener in that context and neither what function(e) means.

There is the link of the code I found on GitHub

Answer 1

addEventListener is part of the standard JavaScript dispatchEvent/addEventListener concept for handling events. The three.js Animation subsystem dispatches an event whenever the animation is finished. From AnimationAction.js:

this._mixer.dispatchEvent( {
    type: 'finished', action: this,
    direction: deltaTime < 0 ? -1 : 1
} );

As you can see, the e event argument provides you with the complete AnimationAction object (e.action), as well as an integer representing the direction of the animation (e.direction).

Do not feel discouraged by the fact that this is undocumented behavior (three.js has grown a lot faster than Mr Doob could ever properly document). Make use of the available functionality, but do keep an eye open for possible changes in feature releases.