three.js
Render Loops voor animatie: objecten dynamisch bijwerken

Dit document beschrijft enkele veelvoorkomende manieren om animaties rechtstreeks aan uw Three.js-scènes toe te voegen. Hoewel er bibliotheken en frameworks zijn die dynamische beweging aan uw scène kunnen toevoegen (tweens, natuurkunde, enz.), Is het handig om te begrijpen hoe u dit eenvoudig zelf kunt doen met een paar regels code.

Het kernconcept van animatie is het bijwerken van de eigenschappen van een object (meestal rotatie en vertaling) in kleine hoeveelheden gedurende een bepaalde periode. Als u bijvoorbeeld een object vertaalt door de X-positie elke tiende van een seconde met 0,1 te vergroten, staat het in 1 seconde 1 eenheid verder op de X-as, maar de kijker ziet het als soepel naar die positie verplaatst over die seconde tijd in plaats van direct naar de nieuwe positie te springen.

Om ons te helpen, maken we een render-lus in het script.

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

In het bovenstaande voorbeeld van een draaiende kubus gebruiken we dit idee - kleine incrementele updates - om de rotatie van de kubus te wijzigen telkens wanneer een nieuw animatieframe wordt aangevraagd. Door de eigenschappen rotation.x en rotation.y van het cube op elk frame te verhogen, lijkt de kubus om die twee assen te draaien.

Als een ander voorbeeld, het is niet ongewoon om uw benodigde update te scheiden in andere functies, waar u extra berekeningen en controles kunt uitvoeren terwijl u de renderlus overzichtelijk houdt. De onderstaande render-lus roept bijvoorbeeld vier verschillende updatefuncties op, elk bedoeld om een afzonderlijk object (of een reeks objecten, in het geval van updatePoints() ) in de scène bij te werken.

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

U zult in voorbeelden online opmerken dat de camerabedieningen ook deel uitmaken van de renderlus.

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

Dit komt omdat het script voor het besturen van de camera hetzelfde doet; updaten in de loop van de tijd. De wijzigingen kunnen worden veroorzaakt door gebruikersinvoer, zoals een muispositie, of iets programmatisch zoals het volgen van een pad. In beide gevallen animeren we echter ook alleen de camera.

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