three.js
Rendering di loop per l'animazione: aggiornamento dinamico degli oggetti

Questo documento descrive alcuni metodi comuni per aggiungere animazioni direttamente nelle scene Three.js. Mentre ci sono librerie e framework che possono aggiungere movimento dinamico alla scena (interpolazioni, fisica, ecc.), È utile capire come puoi farlo da solo con poche righe di codice.

Il concetto centrale dell'animazione sta aggiornando le proprietà di un oggetto (rotazione e traduzione, di solito) in piccole quantità per un periodo di tempo. Ad esempio, se traduci un oggetto aumentando la posizione X di 0,1 ogni decimo di secondo, sarà 1 unità più avanti sull'asse X in 1 secondo, ma lo spettatore lo percepirà come spostato senza problemi in quella posizione rispetto a quello tempo invece di saltare direttamente alla nuova posizione.

Per aiutarci, creiamo un ciclo di rendering nello script.

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

Nell'esempio del cubo rotante sopra, usiamo questa idea - piccoli aggiornamenti incrementali - per cambiare la rotazione del cubo ogni volta che viene richiesto un nuovo fotogramma di animazione. Aumentando le proprietà rotation.x e rotation.y dell'oggetto cube su ogni frame, il cubo sembra ruotare su questi due assi.

Come altro esempio, non è raro separare l'aggiornamento necessario in altre funzioni, dove è possibile eseguire ulteriori calcoli e verifiche mantenendo il ciclo di rendering ordinato. Ad esempio, il ciclo di rendering sotto chiama quattro diverse funzioni di aggiornamento, ciascuna destinata ad aggiornare un oggetto separato (o una matrice di oggetti, nel caso di updatePoints() ) nella scena.

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

Si può notare negli esempi online che anche i controlli della fotocamera fanno parte del ciclo di rendering.

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

Questo perché lo script per il controllo della videocamera sta facendo la stessa cosa; aggiornandolo nel tempo. Le modifiche potrebbero essere causate da input dell'utente come una posizione del mouse o qualcosa di programmatico come seguire un percorso. In entrambi i casi, però, stiamo anche animando la fotocamera.

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