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

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

    });

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

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

   // some code

 });

它似乎有效，但我并不真正理解该上下文中的 addEventListener 以及 function(e) 的含义。

有the code I found on GitHub的链接

Answer 1

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

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

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

不要因为这是未记录的行为而感到气馁(three.js 的增长速度远远快于 Doob 先生无法正确记录的速度)。利用可用的功能，但请留意功能发布中可能发生的变化。