Tween.js不调用onUpdate函数

Question

我使用tweenjs和类型记录来更改three.js多维数据集的x和y坐标。为了更改类"FallingItem“项的x位置，我创建了以下两个变量。

this.movementArcData.horzTween = new TWEEN.Tween(this.movementArcData.pos.x)
                .to(this.movementArcData.newPos.x, this.movementArcData.movementTime * 1000)
                .onUpdate(this.updateXPos)
                .onComplete(this.horzTweenComplete);

其中"this.movementArcData“是一个包含以下内容的对象：

• horzTween -这两者之间的关系
• pos.x -项目的原始位置
• movementTime -完成移动所需的时间，2000毫秒
• updateXPos -具有以下代码的FallingItem对象的成员函数： updateXPos(){ update.mesh.plaction.x=update.movementArcData.pos.x；console.log(“更新x：”+update.movementArcData.pos.x)；}

horzTweenComplete -具有以下代码的FallingItem对象的成员函数：

horzTweenComplete(){
    this.movementArcData.horzTweenComplete = true;
}

updateXPos或horzTweenComplete回调都不会被触发。

我在呈现循环中调用TWEEN.update，如下所示：

TWEEN.update(dt);

由于吐温的onComplete事件从不触发，所以TWEEN.update不断地被调用。我错过了什么会让他们不能正常工作？

Answer 1

Tween.js需要传递经过的时间，而不是增量时间。传递运行时间解决了问题。

另外，它应该被传递给一个包含您想要插值的值的对象。看起来传递值本身不起作用。我在这方面很成功：

let tweenElement = {
                x: this.tweenInfo.pos.x,
                y: this.tweenInfo.pos.y,
                item: this
            }

this.tweenInfo.tweenUp = new TWEEN.Tween(tweenElement)
                .to({y : this.tweenInfo.newPos.y}
                    , this.tweenInfo.movementTime * 0.5 * 1000)
                .easing( TWEEN.Easing.Cubic.InOut )
                .onUpdate(function(){
                    this.item.updateYPos(tweenElement, this)
                })
                .onComplete(function(){
                    this.item.tweenUpComplete();
                });

Answer 2

当TWEEN没有调用我的onUpdate函数时，我也遇到了类似的情况。发现我必须调用window.requestAnimationFrame()，以便告诉浏览器，我，即TWEEN，“希望执行动画，并请求浏览器调用指定的函数，以便在下一次重新绘制之前更新动画。”

function animate(time) {
    window.requestAnimationFrame(animate);
    TWEEN.update(time);
}

new TWEEN
        .Tween({ y: 0 })
        .to({y: 1000}, 700)
        .easing(TWEEN.Easing.Exponential.InOut)
        .onUpdate(function () {
            window.scrollTo(0, this.y);
        })
        .start();

animate();

上面的例子取自world.html。

Answer 3

另一个潜在的原因(我知道在这种情况下可能不是这样)是在代码中的其他地方调用TWEEN.removeAll()。出现这种情况的一个迹象是，其他的推文运行得非常好，但有些则不然。