2

WebGL プロジェクト ( http://eyesonmars.com/ ) で Tween を使用して、新しい位置にスムーズに移動しようとしています。しかし、私はまだ Tween を動作させることができていません。

camera.position.x の値を 3 秒間で -3 から -10 にトゥイーンする代わりに、単にカメラの位置を x=-3 に送信し、続行しません。また、Tween の .onComplete() がアラートをポップアップ表示することで、Tween オブジェクトがそのタスクを完了したと信じていることも確認しました (その後、そのアラートを削除したため、現在のコードにはありません)。

これが私が使用しているコードで、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

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 に答える