Les animations sont essentielles pour donner vie à votre scène 3D. Elles peuvent être déclenchées par des interactions utilisateur, défilement ou basées sur le temps et appliquées aux objets 3D, lumières et caméras.

Maîtriser les animations est une compétence clé pour créer des expériences immersives. Plus vous connaissez de techniques, plus vous pouvez exprimer votre créativité.

Note: Les animations de modèles 3D sont couvertes dans le chapitre des modèles.

Lerp

Lerp est une fonction mathématique qui interpole entre deux valeurs. Elle est utile pour animer une valeur d'un point à un autre.

Copy
const value = THREE.MathUtils.lerp(start, end, t);

Le premier paramètre est la valeur de départ, le deuxième paramètre est la valeur de fin et le troisième paramètre est le facteur d'interpolation entre 0 et 1.

Plus le facteur d'interpolation est proche de 0, plus l'animation sera lente. Plus le facteur d'interpolation est proche de 1, plus l'animation atteindra rapidement la valeur finale ou cible.

Expérimentons cela sur le composant AnimatedBox du starter pack.

Le composant a un tableau boxPositions qui contient les positions de la boîte à différents moments. Ajoutons un hook useFrame pour mettre à jour la position de la boîte en fonction du temps :

Copy
import { RoundedBox } from "@react-three/drei";
import { useRef } from "react";

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];

    box.current.position.x = targetPosition.x;
    box.current.position.y = targetPosition.y;
    box.current.position.z = targetPosition.z;
  });
  // ...
};

Ici, notre boîte n'est pas animée. Elle se téléporte d'une position à une autre. Utilisons la fonction lerp pour l'animer :

Copy
import * as THREE from "three";
// ...

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];
    box.current.position.x = THREE.MathUtils.lerp(
      box.current.position.x,
      targetPosition.x,
      0.05
    );
    box.current.position.y = THREE.MathUtils.lerp(
      box.current.position.y,
      targetPosition.y,
      0.05
    );
    box.current.position.z = THREE.MathUtils.lerp(
      box.current.position.z,
      targetPosition.z,
      0.05
    );
  });
  // ...
};

La boîte est maintenant animée. Elle se déplace en douceur d'une position à une autre.

La classe Vector3 a une méthode lerp qui peut être utilisée à la place de la fonction THREE.MathUtils.lerp :

Copy
// box.current.position.x = THREE.MathUtils.lerp(
//   box.current.position.x,
//   targetPosition.x,
//   0.05
// );
// box.current.position.y = THREE.MathUtils.lerp(
//   box.current.position.y,
//   targetPosition.y,
//   0.05
// );
// box.current.position.z = THREE.MathUtils.lerp(
//   box.current.position.z,
//   targetPosition.z,
//   0.05
// );
box.current.position.lerp(targetPosition, 0.05);

Cela fait beaucoup de lignes économisées pour le même résultat !

N'hésitez pas à jouer avec le temps et à interpoler d'autres propriétés comme la rotation ou l'échelle pour essayer différents effets.

Float

Float est un composant wrapper de la bibliothèque Drei pour simplement donner l'impression qu'un objet flotte.

Il contient les props suivantes :

• speed: Vitesse d'animation, par défaut 1
• rotationIntensity: Intensité de la rotation XYZ, par défaut 1
• floatIntensity: Intensité du mouvement de flottement de haut en bas, fonctionne comme un multiplicateur avec floatingRange, par défaut 1
• floatingRange: Plage de valeurs sur l'axe y dans laquelle l'objet flottera, par défaut [-0.1,0.1]

Faisons flotter notre Duck dans Experience.jsx :