three.js
Återge slingor för animering: dynamiskt uppdatera objekt

Detta dokument beskriver några vanliga sätt att lägga till animeringar direkt i Three.js-scenerna. Det finns bibliotek och ramverk som kan lägga till dynamisk rörelse i din scen (tweens, fysik osv.), Men det är bra att förstå hur du kan göra detta själv helt enkelt med några kodrader.

Kärnbegreppet för animering är att uppdatera ett objekts egenskaper (rotation och översättning, vanligtvis) i små mängder under en tidsperiod. Om du till exempel översätter ett objekt genom att öka X-positionen med 0,1 varje tiondel av en sekund kommer det att vara 1 enhet längre på X-axeln på 1 sekund, men tittaren kommer att uppfatta det som att den smidigt har flyttat till den positionen över det tid istället för att hoppa direkt till den nya positionen.

För att hjälpa oss skapar vi en renderingsslinga i skriptet.

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

I exemplet med snurrande kub ovan använder vi denna idé - små stegvisa uppdateringar - för att ändra kubens rotation varje gång en ny animationsram begärs. Genom att öka egenskaperna rotation.x och rotation.y för cube på varje ram verkar kuben snurra på de två axlarna.

Som ett annat exempel är det inte ovanligt att separera din nödvändiga uppdatering i andra funktioner, där du kan göra ytterligare beräkningar och kontroller samtidigt som renderingsslingan hålls obearbetad. Till exempel anropar renderingsslingan nedan fyra olika uppdateringsfunktioner, var och en avsedd att uppdatera ett separat objekt (eller en rad objekt, i fallet med updatePoints() ) i scenen.

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

Du kan i exempel på nätet märka att kamerakontrollerna också är en del av renderingsslingan.

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

Detta beror på att skriptet för att styra kameran gör samma sak; uppdatera det över tid. Ändringarna kan orsakas av användarinmatning som en musposition eller något programmatiskt som att följa en sökväg. I båda fallen animerar vi dock bara kameran.

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