BABYLON.AnimationEvent 未按预期运行

Question

我需要 Babylon JS 在特定帧触发事件。我正在使用 BABYLON.AnimationEvent。但是在调用动作函数时，其内部变量设置不正确

在下面的示例中，我创建了一个简单的场景并添加了一个盒子。该框将沿 x 轴缓慢移动。每 10 帧，我希望调用一个函数 "do something"。在这个例子中，它将显示帧数。

var createScene = function () {

// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

var box = BABYLON.MeshBuilder.CreateBox("box", {size:10}, scene);

//setup camera
var camera = new BABYLON.ArcRotateCamera("Camera", BABYLON.Tools.ToRadians(-120), BABYLON.Tools.ToRadians(80), 65, new BABYLON.Vector3(0, -15, 0), scene);    camera.attachControl(canvas, false);

 //setup lights
var light1 = new BABYLON.PointLight("light1", new BABYLON.Vector3(-14, 25,25), scene);
light1.intensity = 15;

var animationBox = new BABYLON.Animation("myAnim", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

var keys = [];

for(var i=0; i<100; i++)
{
    keys.push({
        frame: i,
        value: new BABYLON.Vector3(i/10, 0, 0)
    });

    if(i%10==0)
    {
        animationBox.addEvent(new BABYLON.AnimationEvent( i, function() { console.log( "Frame: "+i ) }, true ) );

        /*
        Expected result:
        Frame: 0
        Frame: 10
        Frame: 20
        etc.

        Actual result:
        Frame: 100
        Frame: 100
        Frame: 100
        etc.
        */
    }
}

animationBox.setKeys(keys);
box.animations.push(animationBox);

scene.beginAnimation(box, 0, 100, true);

return scene;

};

预期结果：
帧数：0 帧数：10 帧数：20 等等

实际结果：帧数：100 帧数：100 帧数：100 等等

有些东西我不明白。上面的代码在这里可以运行： https://playground.babylonjs.com/#B3RECS#1

Answer 1

您好，这是因为您正在捕获 i 的最后一个值。您需要关闭以捕获当前值：

https://playground.babylonjs.com/#B3RECS#2

（这是一个一般的 JS 问题，而不是 Babylon.js 的问题）

BABYLON.AnimationEvent 未按预期运行

BABYLON.AnimationEvent doesn't behave as expected

javascript

animation

babylonjs