three.js
Boucles de rendu pour l'animation: mise à jour dynamique des objets

Ce document décrit des méthodes courantes pour ajouter une animation directement dans vos scènes Three.js. Bien qu'il existe des bibliothèques et des frameworks pouvant ajouter du mouvement dynamique à votre scène (tweens, physique, etc.), il est utile de comprendre comment vous pouvez le faire simplement avec quelques lignes de code.

Le concept de base de l'animation consiste à mettre à jour les propriétés d'un objet (rotation et traduction, généralement) en petites quantités sur une période donnée. Par exemple, si vous traduisez un objet en augmentant la position X de 0,1 tous les dixièmes de seconde, il sera 1 unité plus loin sur l’axe des X en 1 seconde, mais le spectateur le percevra comme s’étant doucement déplacé vers cette position. temps au lieu de sauter directement à la nouvelle position.

Pour nous aider, nous créons une boucle de rendu dans le script.

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

Dans l'exemple ci-dessus du cube en rotation, nous utilisons cette idée - petites mises à jour incrémentielles - pour modifier la rotation du cube à chaque fois qu'une nouvelle image est demandée. En incrémentant les propriétés rotation.x et rotation.y de l'objet cube sur chaque image, le cube semble tourner sur ces deux axes.

Autre exemple, il n'est pas rare de séparer votre mise à jour nécessaire dans d'autres fonctions, où vous pouvez effectuer des calculs et des vérifications supplémentaires tout en gardant la boucle de rendu dégagée. Par exemple, la boucle de rendu ci-dessous appelle quatre fonctions de mise à jour différentes, chacune destinée à mettre à jour un objet distinct (ou un tableau d'objets, dans le cas de updatePoints() ) dans la scène.

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

Vous pouvez remarquer dans les exemples en ligne que les commandes de la caméra font également partie de la boucle de rendu.

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

C'est parce que le script pour contrôler la caméra fait la même chose; le mettre à jour au fil du temps. Les modifications peuvent être provoquées par une entrée utilisateur telle qu'une position de la souris ou quelque chose de programmé comme le suivi d'un chemin. Dans les deux cas cependant, nous ne faisons qu'animer la caméra.

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