Le animazioni sono fondamentali per dare vita alla tua scena 3D. Possono essere attivate da interazioni utente, basate su scroll o tempo e applicate a oggetti 3D, luci e telecamere.

Padroneggiare le animazioni è una competenza chiave per creare esperienze immersive. Più tecniche conosci, più puoi esprimere la tua creatività.

Nota: Le animazioni dei modelli 3D sono trattate nel capitolo dedicato ai modelli.

Lerp

Lerp è una funzione matematica che interpola tra due valori. È utile per animare un valore da un punto all'altro.

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

Il primo parametro è il valore iniziale, il secondo parametro è il valore finale e il terzo parametro è il fattore di interpolazione tra 0 e 1.

Più il fattore di interpolazione è vicino a 0, più lenta sarà l'animazione. Più il fattore di interpolazione è vicino a 1, più velocemente l'animazione raggiungerà il valore finale o di destinazione.

Sperimentiamo con il componente AnimatedBox del pacchetto iniziale.

Il componente ha un array boxPositions che contiene le posizioni della scatola in momenti diversi. Aggiungiamo un hook useFrame per aggiornare la posizione della scatola in base al tempo:

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

Qui la nostra scatola non è animata. Si teletrasporta da una posizione all'altra. Usiamo la funzione lerp per animarla:

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 scatola ora è animata. Si muove fluidamente da una posizione all'altra.

La classe Vector3 ha un metodo lerp che può essere usato al posto della funzione 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);

Quante righe risparmiate per ottenere lo stesso risultato!

Non esitare a giocare con il tempo e a interpolare altre proprietà come la rotation o la scale per provare effetti diversi.

Float

Float è un wrapper component della libreria Drei che consente di dare semplicemente l'impressione che un oggetto stia fluttuando.

Contiene le seguenti proprietà:

• speed: Velocità dell'animazione, valore predefinito 1
• rotationIntensity: Intensità di rotazione XYZ, valore predefinito 1
• floatIntensity: Intensità del float verso l'alto/verso il basso, funziona come un moltiplicatore con floatingRange, valore predefinito 1
• floatingRange: Intervallo di valori sull'asse y entro cui l'oggetto fluttuerà, valore predefinito [-0.1,0.1]

Facciamo fluttuare il nostro Anatra in Experience.jsx: