three.jsアニメーションのレンダリングループ：オブジェクトの動的更新

アニメーションのコアコンセプトは、オブジェクトのプロパティ（通常は回転と平行移動）を一定期間にわたって少量で更新することです。たとえば、X位置を0.1秒ごとに1秒ずつ増加させてオブジェクトを平行移動させると、X軸の1秒後に1単位増加しますが、ビューアはその位置にスムーズに移動したと認識します新しい位置に直接ジャンプするのではなく、

私たちを助けるために、スクリプトでレンダリングループを作成します 。

var render = function () {
    requestAnimationFrame( render );
    //update some properties here
    renderer.render(scene, camera);
}

上のスピンキューブの例では、新しいアニメーションフレームが要求されるたびにキューブの回転を変更するために、小さなインクリメンタルアップデートというこのアイデアを使用します。インクリメントすることによりrotation.xとrotation.yのプロパティcubeすべてのフレーム上のオブジェクトを、キューブは、これら二つの軸上で回転するように見えます。

別の例として、必要な更新を他の関数に分けることは珍しいことではありません。追加の計算とチェックを行いながらレンダリングループを整理しておくことができます。たとえば、以下のレンダリングループでは、シーン内の別のオブジェクト（ updatePoints()場合はオブジェクトの配列）を更新する4つの異なる更新関数を呼び出します。

//render loop
function render() {
    requestAnimationFrame( render );
    updateGrid();
    updateCube();
    updateCamera();
    updatePoints(pList);
    renderer.render( scene, camera);
}
render();

オンラインの例では、カメラコントロールもレンダリングループの一部であることがわかります。

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

var render = function () {
    requestAnimationFrame( render );
    controls.update();
    renderer.render(scene, camera);
};

これは、カメラを制御するためのスクリプトが同じことをしているからです。それを時間とともに更新する。変更は、マウスの位置などのユーザー入力や、パスをたどるようなプログラマチックなものによって引き起こされる可能性があります。どちらの場合も、カメラをアニメーション化するだけです。