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


} 

Answer 2

tween 不适用于整数

function zoomOutCamera()
{
    var position, target;

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

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

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

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

    myTween.start(+new Date());
}


function myAnimate()
{


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


}