在three.js 中验证clipAction 动画何时播放完毕

Question

我在 Blender 中制作了一个动画网格，其中包含我命名为intro和idle 的两个动画剪辑。我已经用 JSON 格式的 Blender 导出器导出了它。一切都很好。我可以切换我想播放的动画。我的问题是我想完全播放第一个动画，然后切换到我将设置为循环的第二个动画。

这是我用于 JSON 和动画部分的代码部分：

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();

    });

我正在寻找的是一个函数，它告诉我动作已完成，就像 clipAction 完成播放时的 onComplete 事件。我在three.js GitHub上找到了这个回复：

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

   // some code

 });

它似乎有效，但我并不真正理解addEventListener在这种情况下的意义，也不是什么function(e)意思。

有我在 GitHub 上找到的代码的链接

Answer 1

addEventListener是用于处理事件的标准 JavaScript dispatchEvent/addEventListener 概念的一部分。每当动画完成时，three.js 动画子系统就会调度一个事件。来自AnimationAction.js：

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

如您所见，e事件参数为您提供了完整的AnimationAction对象（e.action），以及一个表示动画方向的整数（e.direction）。

不要因为这是未记录的行为而感到气馁（three.js 的增长速度比 Doob 先生能够正确记录的速度要快得多）。利用可用的功能，但要密切关注功能版本中可能发生的变化。