Animation des Objets dans Three.js

Par jfayad, 24 mars, 2025
Logo de Three.js

Bienvenue dans notre dernier blog de la série ! Nous allons conclure en apprenant à animer des objets dans Three.js. L'animation rend tes scènes interactives et dynamiques, permettant d'ajouter des mouvements fluides et captivants à tes objets.

Étape 1 : Comprendre l'Animation dans Three.js

Dans Three.js, l'animation consiste à mettre à jour les propriétés des objets (comme la position, la rotation ou l'échelle) à chaque image. Cela se fait grâce à la fonction requestAnimationFrame(), qui appelle de manière récursive une fonction d'animation à chaque rafraîchissement de l'écran.

La base d'une animation simple dans Three.js ressemble à ceci :

function animate() {
  requestAnimationFrame(animate);

  // Ton code d'animation ici

  renderer.render(scene, camera);
}
animate();

Cette fonction permet de redessiner la scène en mettant à jour les objets à chaque image. Voyons comment l'utiliser pour créer des animations concrètes.

Étape 2 : Ajouter une Rotation Continue

La première animation que nous allons implémenter est une simple rotation continue. Nous allons faire tourner un cube autour de l'axe Y à chaque image.

Ajoutons ce comportement dans notre fonction d'animation :

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

Ici, à chaque image, la propriété rotation.y du cube est incrémentée, créant ainsi une rotation continue. Cela donne l'impression que le cube tourne en permanence.

Étape 3 : Ajouter du Mouvement avec le Sinus

Au lieu de simplement tourner le cube, ajoutons un effet plus intéressant en déplaçant le cube de haut en bas de manière fluide. Nous allons utiliser une fonction sinus pour créer ce mouvement.

Voici comment l'ajouter :

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.y += 0.01;

  cube.position.y = Math.sin(Date.now() * 0.001) * 2;

  renderer.render(scene, camera);
}

Dans ce code :

  • La rotation est toujours présente.

  • cube.position.y = Math.sin(Date.now() * 0.001) * 2 fait monter et descendre le cube dans un mouvement fluide grâce à la fonction sinus appliquée à l'horloge (Date.now()).

Étape 4 : Utiliser GSAP pour des Animations Plus Fluides

Pour aller plus loin, nous allons utiliser GSAP, une bibliothèque JavaScript spécialisée dans l'animation. GSAP permet de créer des animations fluides et de les contrôler avec précision.

Ajoutons GSAP à notre projet et utilisons-le pour animer la position et la rotation du cube.

1. Inclure GSAP

Ajoute cette ligne dans ton fichier HTML pour inclure GSAP dans ton projet :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

2. Animer avec GSAP

Avec GSAP, nous allons faire en sorte que :

  • Le cube tourne sur l'axe Y.

  • Le cube se déplace de haut en bas avec un effet "yoyo" (mouvement alterné entre montée et descente).

Voici comment le faire :

gsap.to(cube.rotation, { y: Math.PI * 2, duration: 5, repeat: -1, ease: "power1.inOut" });
gsap.to(cube.position, { y: 2, duration: 2, repeat: -1, yoyo: true, ease: "power1.inOut" });

Explications :

  • cube.rotation effectue une rotation complète sur l'axe Y (2π radians) toutes les 5 secondes.

  • cube.position fait monter le cube à la position Y = 2 en 2 secondes, puis le fait redescendre grâce à l'option yoyo.

Étape 5 : Le Code Final

bzge0.gif

Voici le code final complet, incluant l'animation avec GSAP et l'effet de mouvement fluide du cube :

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// Lumière directionnelle avec ombre
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
scene.add(directionalLight);

// Cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);

// Plan
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1;
plane.receiveShadow = true;
scene.add(plane);

// Animation du cube avec GSAP
gsap.to(cube.rotation, { y: Math.PI * 2, duration: 5, repeat: -1, ease: "power1.inOut" });
gsap.to(cube.position, { y: 2, duration: 2, repeat: -1, yoyo: true, ease: "power1.inOut" });

// Fonction d'animation
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Conclusion

Et voilà ! Nous avons animé un cube avec une rotation continue et un mouvement fluide en utilisant Three.js et GSAP. Avec ces outils, tu peux rendre ta scène bien plus vivante et interactive. Les possibilités d'animation sont infinies : tu peux animer des caméras, des lumières, des textures, et bien plus encore.

Ce dernier blog marque la fin de notre série sur Three.js. J'espère que tu as acquis une solide compréhension des bases pour créer des scènes 3D et que tu continueras à expérimenter avec cette puissante bibliothèque !

Bibliographie

  1. « three.js journey», dans Bruno Simon, dir., three.js, 2025-03-24, https://threejs-journey.com/lessons/animations#

Étiquettes

Commentaires