2

我正在尝试在我的 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 书。我很高兴听到有关如何更准确地发布我的问题的任何建议。

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

4

2 回答 2

1

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

function myAnimate(time)
{


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


}

于 2015-05-17T19:33:06.117 回答
0

补间不适用于整数

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


}
于 2012-11-13T14:16:54.960 回答