three.js
Render Loops for Animation: Actualización dinámica de objetos

Este documento describe algunas formas comunes de agregar animación directamente en sus escenas de Three.js. Si bien hay bibliotecas y marcos que pueden agregar movimiento dinámico a su escena (interpolaciones, física, etc.), es útil comprender cómo puede hacerlo usted mismo simplemente con unas pocas líneas de código.

El concepto central de animación es actualizar las propiedades de un objeto (rotación y traducción, generalmente) en pequeñas cantidades durante un período de tiempo. Por ejemplo, si traduces un objeto aumentando la posición X en 0.1 cada décima de segundo, será 1 unidad más en el eje X en 1 segundo, pero el espectador lo percibirá como si se hubiera movido suavemente a esa posición sobre esa posición Tiempo en lugar de saltar directamente a la nueva posición.

Para ayudarnos, creamos un bucle de render en el script.

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

En el ejemplo de cubo giratorio anterior, usamos esta idea (pequeñas actualizaciones incrementales) para cambiar la rotación del cubo cada vez que se solicita un nuevo cuadro de animación. Al incrementar las propiedades rotation.x y rotation.y del objeto de cube en cada fotograma, el cubo parece girar en esos dos ejes.

Como otro ejemplo, no es raro que separe su actualización necesaria en otras funciones, donde puede hacer cálculos y verificaciones adicionales mientras mantiene el bucle de procesamiento ordenado. Por ejemplo, el siguiente bucle de procesamiento llama a cuatro funciones de actualización diferentes, cada una destinada a actualizar un objeto separado (o una matriz de objetos, en el caso de updatePoints() ) en la escena.

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

Puede observar en los ejemplos en línea que los controles de la cámara también forman parte del bucle de procesamiento.

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

Esto se debe a que el script para controlar la cámara está haciendo lo mismo; Actualizándolo a lo largo del tiempo. Los cambios pueden ser causados ​​por la entrada del usuario, como la posición del mouse, o algo programático, como seguir una ruta. En cualquier caso, sin embargo, también estamos animando la cámara.

var scene = new THREE.Scene();  
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

//Create an render loop to allow animation
var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();