渲染動畫的迴圈動態更新物件

動畫的核心概念是在一段時間內以較小的數量更新物件的屬性（通常是旋轉和平移）。例如，如果你通過每十分之一秒將 X 位置增加 0.1 來平移一個物體，那麼它將在 1 秒內在 X 軸上進一步增加 1 個單位，但是觀察者會認為它已經平穩地移動到那個位置。時間而不是直接跳到新的位置。

為了幫助我們，我們在指令碼中建立了一個渲染迴圈。

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

在上面的旋轉立方體示例中，我們使用這個想法 - 小增量更新 - 每次請求新的動畫幀時更改立方體的旋轉。通過在每個幀上遞增 cube 物件的 rotation.x 和 rotation.y 屬性，立方體似乎在這兩個軸上旋轉。

另一個例子是，將所需的更新分成其他函式並不罕見，在這些函式中，你可以執行其他計算和檢查，同時保持渲染迴圈整潔。例如，下面的渲染迴圈呼叫四個不同的更新函式，每個函式用於更新場景中的單獨物件（或者在 updatePoints() 的情況下為物件陣列）。

//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);
};

這是因為用於控制相機的指令碼正在做同樣的事情; 隨著時間推移更新它。這些更改可能是由使用者輸入引起的，例如滑鼠位置，或類似跟蹤路徑的程式。無論哪種情況，我們都只是為相機制作動畫。