Utiliser les composants `drei` (OrbitControls, Stats)

1. Qu'est-ce que @react-three/drei ?

Imaginez que vous construisiez une application web. Vous n'allez pas recréer de zéro un sélecteur de date ou un carrousel d'images ; vous utiliseriez une librairie de composants qui a déjà résolu ces problèmes pour vous. @react-three/drei (qui signifie "trois" en allemand, un clin d'œil à Three.js) est exactement cela pour React Three Fiber.

C'est une vaste collection de composants, de hooks et d'utilitaires prêts à l'emploi qui simplifient des tâches courantes en 3D : contrôles de caméra, chargement de modèles, création d'environnements, gestion des performances, etc.

Pour vous donner une idée de l'étendue de la librairie, parcourez la liste d'imports dans la ressource suivante. Ne vous attardez pas sur chaque élément, l'idée est juste d'apprécier la richesse de l'écosystème.

Notre objectif aujourd'hui est de maîtriser deux des plus fondamentaux. Commençons par installer la librairie dans votre projet :

npm install @react-three/drei

2. Intégrer des contrôles de caméra avec <OrbitControls />

Jusqu'à présent, notre caméra était statique. Pour explorer une scène 3D, il est indispensable de pouvoir bouger la caméra. Le composant <OrbitControls /> nous permet de le faire avec la souris :

• Clic gauche + glisser : Tourner autour d'un point central (orbite).
• Molette : Zoomer et dézoomer.
• Clic droit + glisser : Se déplacer latéralement (panoramique).

L'intégrer est incroyablement simple : il suffit de l'importer et de l'ajouter à l'intérieur de votre composant <Canvas>.

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function App() {
  return (
    <Canvas>
      {/* ... vos objets 3D ... */}
      <OrbitControls />
    </Canvas>
  )
}

Et c'est tout ! Vous avez maintenant des contrôles de caméra fonctionnels.

Le code ci-dessous montre un exemple plus complet, avec quelques propriétés utiles pour personnaliser le comportement des contrôles.

Comme vous pouvez le voir, on peut utiliser des props (propriétés) pour le configurer, tout comme n'importe quel autre composant React :

• enablePan={false} : Désactive le déplacement latéral.
• minDistance={5} / maxDistance={20} : Contraint le niveau de zoom.
• maxPolarAngle={Math.PI / 2} : Empêche la caméra de passer sous le "sol".

C'est un excellent exemple de la philosophie de React Three Fiber : transformer des configurations parfois complexes de Three.js en composants JSX simples et déclaratifs.

3. Surveiller les performances avec <Stats />

Les applications 3D peuvent être gourmandes en ressources. Il est crucial de garder un œil sur les performances, notamment le nombre d'images par seconde (FPS - Frames Per Second). L'objectif est de rester le plus proche possible de 60 FPS pour garantir une expérience fluide.

Le composant <Stats /> de drei affiche un petit moniteur de performance directement dans votre scène. Tout comme OrbitControls, son utilisation est triviale.

Pour l'ajouter, il suffit de l'importer et de le placer dans le <Canvas>.

Le code ci-dessous montre comment Stats et OrbitControls sont utilisés conjointement.

4. Atelier : Mettre en pratique

Il est temps de rassembler tous ces éléments. Prenez le code de votre leçon précédente (celui avec le cube qui tourne) et modifiez-le pour y inclure OrbitControls et Stats.

Voici à quoi votre fichier App.js (ou équivalent) pourrait ressembler :

import { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Stats } from '@react-three/drei';

// Ce composant Cube est juste un exemple.
// Vous pouvez utiliser n'importe quel objet.
function Cube() {
  const meshRef = useRef();

  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.y += delta;
      meshRef.current.rotation.x += delta * 0.5;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 8], fov: 60 }}>
      {/* Lumières pour que l'on voie l'objet */}
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

      <Cube />
      
      {/* Nos nouveaux composants de drei ! */}
      <OrbitControls />
      <Stats />
    </Canvas>
  );
}

À faire :

1. Assurez-vous que @react-three/drei est installé.
2. Copiez-collez ce code dans votre projet.
3. Lancez l'application. Vous devriez voir votre cube tourner, le compteur de FPS dans le coin, et vous devriez pouvoir faire tourner la caméra autour du cube avec votre souris.

Conclusion

Félicitations ! Vous venez de faire un grand pas pour rendre vos scènes 3D plus professionnelles et plus faciles à développer.

Points clés à retenir :

• @react-three/drei est une librairie incontournable qui fournit des composants et des hooks prêts à l'emploi pour R3F.
• Le composant <OrbitControls /> ajoute des contrôles de caméra interactifs à votre scène avec une seule ligne de code.
• Le composant <Stats /> est un outil de débogage essentiel pour surveiller les performances (FPS) de votre application.
• L'intégration de ces outils se fait de manière déclarative, en les plaçant simplement à l'intérieur du <Canvas>.

Aperçu de la prochaine leçon :
Maintenant que nous savons comment naviguer dans nos scènes, il est temps de les peupler avec des objets plus intéressants que de simples cubes. Dans la prochaine leçon, nous resterons dans l'écosystème drei pour apprendre à charger des modèles 3D professionnels au format GLTF en utilisant le hook useGLTF. C'est une étape cruciale pour créer des expériences visuellement riches, comme des galeries de produits.