javascript - Three.js补间值没有到达目标，而是完成但保持初始值

Question

我正在尝试在我的 WebGL 项目 ( http://eyesonmars.com/ ) 中使用 Tween 来顺利地将 移动到新位置。但是，我还没有能够让 Tween 为我工作。

不是在 3 秒内将 camera.position.x 的值从 -3 补间到 -10，而是简单地将相机的位置发送到 x=-3 并且不会继续。我还确认 Tween 对象认为它已经通过让 Tween 的 .onComplete() 弹出一个警报来完成它的任务(我已经删除了那个警报，所以它不在当前代码中)。

这是我正在使用的代码，可以在 http://eyesonmars.com/libs/EOM_Utils.js 找到

function zoomOutCamera()
{
    var position, target;

    // app.camera.position.z = 10;

    position = -3.0;
    target = -10.0;
    myTween = new TWEEN.Tween(position).to(target, 3000);

    myTween.onUpdate(function(){
        // alert(position);
        app.camera.position.x = position;
    });

    // myTween.onComplete(bananaphone(position));

    myTween.start();
}


function myAnimate()
{


    if(!myTween.onComplete())
    {
    requestAnimationFrame( myAnimate);
    }
    myTween.update();


}

下面我总结了我是如何测试代码的，以及根据我认为我知道的应该发生的事情。

正在发生的事情:在浏览器 JavaScript 控制台中输入:

input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -3

应该发生什么(根据我的说法):在浏览器 JavaScript 控制台中输入:

input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -10

我尝试了不同的补间变体，还研究了在线解决方案和我的 O'Reilly 书。我很高兴听到关于如何更准确地发布我的问题的任何建议。

提前感谢您提供的任何帮助。

Answer 1

Tween的更新功能需要时间!？？？？当您使用 3d 渲染函数“myAnimate”时，您需要传递时间参数...

function myAnimate(time)
{


    if(!myTween.onComplete())
    {
    requestAnimationFrame( myAnimate);
    }
    myTween.update(time);


}