スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js 　オブジェクト（被写体）の移動

アニメーションの基本として、オブジェクトの平行移動（transaction）と回転移動（rotation）を取り上げます。

移動の基本パターン

　　var interval = 20;                          // １回の移動の遅延期間 20/1000秒
    var i = 0;
    var timerId = setInterval(function(){       // ループの開始
　　　　　　　　　　　　　　　　　　　　　　　　　　　// 移動の指定
        box.position.x += dtx;          　　　　　　　　  // １回のｘ軸方向への移動
　　　　　　：
        box.rotation.x += drx;           　　　　　　　　 // １回の回転角度
　　　　　　：
        renderer.render(scene, camera);　　　　　　　// レンダリング（表示）

　　　　　　　　　　　　　　　　　　　　　　　　　　 // 移動の変更
　　　　if (box.position.x >=  300) dtx = -dtx;　　　　　// 右側端に達すると戻る
 　　　 if ( (i > 0) && (i/50) ) drx = -drx;　　　　　　 // ５０回回転するたびに回転方向の変更
　　　　　　：
        if (i >= imax) clearInterval(timerId);  　// 回転打切条件
        i = i+1;
    }, interval);　　　　　　　　　　　　　　　 // ループの終了

多くの Three.js の解説では、次の方法が紹介されています。
利点があるのかもしれませんが、速度の変更や回転終了などを指定する方法を私は知りません。

    tick();    // 回転させる関数の呼び出し
    // 回転関数
    function tick() {
        :
        renderer.render(scene, camera); // レンダリング
        requestAnimationFrame(tick);
    }