three.js
5 - Animation

animate

Pour l'instant tout est statique. Nous voulons animer notre scène.

requestAnimationFrame

Nous allons créer une fonction animate. Cette fonction va être appelé à chaque frame. Puis, nous allons utiliser requestAnimationFrame pour appeler la fonction animate à nouveau à chaque frame.

Cette fonction est native en JS navigateur. Cette fonction s'anime image par image.

 const animate = () => {
    mesh.rotation.y += 0.01
    
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
}
 
animate()

Notre cube tourne sur lui-même.

Ajouter d'autre objets

Animer chaque objet

mesh2.rotation.x += 0.01
mesh3.rotation.z += 0.01

Animer le groupes

group.rotation.y += 0.01

Delta time

Nous allons utiliser le delta time pour animer nos objets.

const clock = new THREE.Clock()
 
const animate = () => {
    const elapsedTime = clock.getElapsedTime()
    
    mesh.rotation.y = elapsedTime
    
    mesh2.rotation.x = elapsedTime
    mesh3.rotation.z = elapsedTime
    
    group.rotation.y = elapsedTime
    
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
}

De base, requestAnimationFrame s'execute autant de fois que le taux de rafraichissement de l'écran (60 fois par exemple par défault). Ce taux peut varier en fonction de la puissance de l'ordinateur (30 ou 120 Hz).

Pour éviter cela, nous allons utiliser un Clock de Three.js.

elapsedTime est le temps écoulé depuis le début de l'animation. Cette variable peut être utilisée pour animer nos objets.

console.log(elapsedTime)

Sinus et cosinus

Nous allons utiliser les fonctions sinus et cosinus pour animer nos objets.

mesh.position.y = Math.sin(elapsedTime)
mesh.position.x = Math.cos(elapsedTime)

Les fonctions sinus et cosinus sont des fonctions périodiques. Elles sont très utiles pour animer des objets.

GSAP

Nous povons aussi utiliser GSAP pour animer nos objets.

npm install gsap
import gsap from 'gsap'
 
// animate
// ,,,
 
gsap.to(mesh3.position, { duration: 2, x: 2, repeat: -1, yoyo: true });
4 - Coordonnées6 - GUI