three.js
Renderschleifen für Animation: Objekte dynamisch aktualisieren

Dieses Dokument beschreibt einige gängige Möglichkeiten, um Animationen direkt in Three.js-Szenen einzufügen. Es gibt zwar Bibliotheken und Frameworks, die Ihrer Szene dynamische Bewegungen hinzufügen können (Tweens, Physik usw.). Es ist jedoch hilfreich zu verstehen, wie Sie dies selbst mit wenigen Zeilen Code tun können.

Das Kernkonzept der Animation besteht darin, die Eigenschaften eines Objekts (normalerweise Rotation und Translation) in kleinen Mengen über einen bestimmten Zeitraum zu aktualisieren. Wenn Sie zum Beispiel ein Objekt durch Erhöhen der X-Position jede Zehntelsekunde um 0,1 verschieben, wird es innerhalb einer Sekunde um eine Einheit weiter auf der X-Achse sein, aber der Betrachter wird das Gefühl haben, dass er sich glatt über diese Position bewegt hat Zeit anstatt direkt auf die neue Position zu springen.

Um uns zu unterstützen, erstellen wir eine Render-Schleife im Skript.

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

Im obigen Beispiel für sich drehende Würfel verwenden wir diese Idee - kleine inkrementelle Aktualisierungen -, um die Drehung des Würfels jedes Mal zu ändern, wenn ein neuer Animationsrahmen angefordert wird. Durch Erhöhen der rotation.x und rotation.y Eigenschaften des cube Objekts in jedem Frame scheint sich der Cube auf diesen beiden Achsen zu drehen.

Als ein anderes Beispiel ist es nicht ungewöhnlich, das benötigte Update in andere Funktionen zu unterteilen, wo Sie zusätzliche Berechnungen und Überprüfungen durchführen können, während die Render-Schleife unübersichtlich bleibt. Zum Beispiel ruft die nachstehende Wiedergabeschleife vier verschiedene Aktualisierungsfunktionen auf, von denen jede dazu dient, ein separates Objekt (oder ein Array von Objekten im Falle von updatePoints() ) in der Szene zu aktualisieren.

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

In Online-Beispielen stellen Sie möglicherweise fest, dass die Kamerasteuerungen auch Teil der Render-Schleife sind.

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

Dies liegt daran, dass das Skript zur Steuerung der Kamera dasselbe tut. Aktualisierung im Laufe der Zeit. Die Änderungen können durch Benutzereingaben wie eine Mausposition oder eine programmatische Funktion wie das Befolgen eines Pfads verursacht werden. In beiden Fällen animieren wir aber auch nur die Kamera.

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