アニメーションの速度がどんどん加速してしまう。

物体を回転させるアニメーションを作っていたのですが、何か挙動がおかしいことに気が付きました。時間が経つごとに回転の速度が加速していき、そのうち動きがカクカクになってしまいます。おそらく、回転速度が速くなりすぎてカクカクになっているかと思います。

ソースの確認

var scene, camera, renderer, controls;
var sphere;
init();
animate();
function init() {
    // 物体をシーンに追加
    // 球とトーラスは親子関係にしてあります
}

function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

// 情報の更新
function update() {
    controls.update();
    shpereUpdate();
}

// レンダリング
function render() {
    renderer.render(scene, camera);
}

function shpereUpdate() {
    sphere.rotation.x += 0.01;
    setTimeout(shpereUpdate, 100);
}

原因はsetTimeoutにありました。実はrequestAnimationFrameは無限ループが行われてました。これはsetIntervalをアニメーション向けにしたようなものです。

requestAnimationFrameがあればsetTimeoutは必要ない

requestAnimationFrameは描画が必要ない時は処理を行わないなどの機能があります。例えば、ブラウザで別タブを閲覧中は、無限ループが停止しています。FPSに関しては60fpsを再現しているようです。つまり、requestAnimationFrameを使っていれば、わざわざsetTimeoutは使う必要はありませんでした。

1秒間に約60回もanimateが呼び出されるということは、shereUpdateもその分呼び出され、結果としてsetTimeoutの無限ループの数が増殖してしまいます。つまり、回転させるループ処理は1つではなく、毎秒、約60個も増えていたのです。

ソースの修正

function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

function shpereUpdate() {
    sphere.rotation.x += 0.01;
}

setTimeoutを削除しました。それ以外のことは何もしていません。また、他の関数は省略しています。