Pour positionner et animer la caméra dans une scène 3D, nous avons découvert quelques façons de le faire :

• Définir manuellement la position et la rotation de la caméra.
• Utiliser différents types de contrôles, comme OrbitControls.

Mais parfois, nous avons besoin de plus de contrôle sur la caméra, et cela nécessite beaucoup de code et de calcul pour bien faire. Heureusement, il existe des bibliothèques qui peuvent nous aider.

Celle que nous allons utiliser s'appelle camera-controls. C'est une petite bibliothèque qui nous permet de réaliser une variété de mouvements et d'animations de caméra très facilement.

Par chance, Drei dispose d'un wrapper pour cette bibliothèque, nous pouvons donc l'utiliser avec quelques lignes de code.

Projet de départ

Pour découvrir les différentes fonctionnalités de cette bibliothèque, nous allons créer un joli carrousel 3D pour présenter le nouvel iPhone 15 Pro Max Black.

Merci de me contacter quand l'iPhone 16 sera sorti afin que je puisse mettre à jour cette leçon 🤭

Le projet de départ contient :

• Le modèle de Apple iPhone 15 Pro Max Black par polyman. Sous licence Creative Commons Attribution.
• Un composant UI contenant un slider réalisé avec Tailwind CSS que nous ajouterons plus tard au projet.

Pour l'instant, nous ne voyons que le modèle d'iPhone

Commençons à jouer avec les contrôles de la caméra.

Contrôles

Pour activer les contrôles de la caméra, nous devons remplacer les OrbitControls déjà présents dans le projet de démarrage par le composant CameraControls de Drei.

Nous allons également ajouter une référence au contrôle pour pouvoir y accéder plus tard et utiliser ses méthodes.

Experience.jsx:

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

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

En faisant cela, nous ne remarquons aucune différence majeure avec les OrbitControls. Nous pouvons toujours faire pivoter, panorer et zoomer la caméra.

L'API dispose également de nombreux contrôles en commun tels que la distance, le zoom, l'polarAngle, l'azimuthAngle, ...

Là où le composant CameraControls excelle, c'est lorsque nous voulons animer la caméra.

Nous n'aborderons pas tous les contrôles disponibles, mais nous verrons les plus courants. Vous pouvez trouver la liste complète dans la documentation camera-controls.

Dolly

Le contrôle dolly nous permet de déplacer la caméra vers l'avant et l'arrière.

Utilisons Leva pour ajouter des boutons permettant de déplacer la caméra vers l'avant et l'arrière :

Copy
// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

Le premier argument de la méthode dolly est la distance à laquelle nous souhaitons déplacer la caméra. Le second argument est un booléen qui indique si nous voulons animer le mouvement ou non.

Notre caméra peut maintenant se déplacer vers l'avant et l'arrière

Si nous voulions obtenir le même résultat avec les OrbitControls, nous devrions calculer la nouvelle position de la caméra et la cible. Ensuite, nous devrions animer la caméra et la cible vers leurs nouvelles positions.

Camion

Le contrôle truck nous permet de déplacer la caméra vers le haut, le bas, la gauche et la droite sans changer l'orientation de la caméra.

Comme nous l'avons fait avec le contrôle dolly, ajoutons des boutons pour expérimenter le contrôle truck :

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

Les deux premiers arguments de la méthode truck sont les distances horizontale et verticale que nous voulons déplacer la caméra. Le troisième argument est un booléen qui indique si nous voulons animer le mouvement ou non.

Vous pouvez utiliser des valeurs différentes pour les distances horizontale et verticale pour déplacer la caméra en diagonale.

Rotate

Camera Controls fournissent un moyen de faire pivoter la caméra autour de sa cible de manière programmatique, comme le mouvement que nous effectuons lorsque nous faisons glisser la souris avec les OrbitControls.

Ajoutons des boutons pour faire pivoter la caméra autour de sa cible :

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

Les arguments de la méthode rotate sont :

• azimuthAngle: l'angle horizontal en radians.
• polarAngle: l'angle vertical en radians.
• enableTransition: un booléen qui indique si nous voulons animer le mouvement ou non.

Smooth time

Pour contrôler le temps d'animation lorsque nous utilisons l'argument enableTransition, nous pouvons utiliser la propriété smoothTime.