渲染动画的循环动态更新对象

动画的核心概念是在一段时间内以较小的数量更新对象的属性（通常是旋转和平移）。例如，如果你通过每十分之一秒将 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);
};

这是因为用于控制相机的脚本正在做同样的事情; 随着时间推移更新它。这些更改可能是由用户输入引起的，例如鼠标位置，或类似跟踪路径的程序。无论哪种情况，我们都只是为相机制作动画。