Composants de Scène R3F Réutilisables

1. La philosophie de R3F : Penser en composants

En tant que développeur web, vous êtes déjà habitué à penser en termes de composants pour construire une interface utilisateur. React Three Fiber applique cette même philosophie à la 3D. Au lieu de manipuler une "scène" de manière impérative, nous allons la décrire comme un arbre de composants React.

Cette approche par composants est la clé pour gérer la complexité.

2. Le premier pas : Extraire un objet en composant

Imaginons une scène simple avec plusieurs cubes. Au lieu de copier-coller le code du <mesh> plusieurs fois, nous pouvons créer un composant <Cube> réutilisable. C'est le principe de base de la structuration de scène.

Cette technique est exactement la même que celle que vous utiliseriez pour créer un composant <Button> ou <Card> en React. Vous identifiez un élément d'interface (ici, un objet 3D), vous l'isolez dans sa propre fonction, et vous le rendez configurable via des props.

3. Organiser la structure globale de la scène

Maintenant que nous savons comment créer des composants pour les objets, appliquons la même logique à la scène entière. Une bonne pratique consiste à ne pas placer toute la logique 3D directement dans votre composant App.jsx.

On sépare généralement la configuration du <Canvas> du contenu de la scène elle-même.

Une structure de départ saine pour nos projets R3F ressemble donc souvent à ceci :

// Dans App.jsx
function App() {
  return (
    <>
      <div className="ui">...</div>
      <Canvas>
        <Experience />
      </Canvas>
    </>
  );
}

// Dans Experience.jsx
function Experience() {
  return (
    <>
      {/* Nos lumières, modèles 3D, etc. viendront ici */}
    </>
  );
}

4. Le workflow professionnel : Générer des composants à partir de modèles 3D

Pour notre projet de showcase, nous n'allons pas assembler des cubes, mais plutôt charger un modèle 3D complexe, par exemple au format .glb. La meilleure façon de l'intégrer dans R3F est de le convertir en un composant React.

L'écosystème de R3F (Poimandres) fournit un outil formidable pour cela : gltfjsx. Il analyse un fichier 3D et génère automatiquement un composant React, avec chaque partie du modèle accessible.

L'utilisation de gltfjsx est une pratique standard dans le développement R3F professionnel. Elle nous offre :

• Réutilisabilité : On peut maintenant utiliser <Chair /> n'importe où.
• Performance : Le hook useGLTF précharge et met en cache le modèle.
• Contrôle : Chaque partie du modèle est un <mesh> que l'on peut contrôler via des props, comme n'importe quel autre composant React.

5. L'architecture d'un projet de showcase

Maintenant, assemblons toutes ces idées pour définir l'architecture de notre projet final. Une scène de présentation de produit se compose généralement de plusieurs éléments logiques :

1. Le produit lui-même (le modèle 3D).
2. L'éclairage (les différentes lumières qui le mettent en valeur).
3. L'environnement (un sol, un arrière-plan, des reflets).
4. Les contrôles (pour que l'utilisateur puisse interagir).

Au lieu de tout mélanger, nous allons créer un composant pour chaque partie. Notre composant <Experience /> pourrait ressembler à ça :

// Experience.jsx

import { Product } from './Product';
import { Lighting } from './Lighting';
import { Environment }s from './Environment';
import { OrbitControls } from '@react-three/drei';

export function Experience() {
  return (
    <>
      <OrbitControls />
      <Lighting />
      <Environment />
      <Product />
    </>
  );
}

C'est une structure claire, lisible et facile à maintenir. Si vous devez ajuster l'éclairage, vous savez qu'il faut aller dans Lighting.jsx. Si vous voulez changer le modèle 3D, vous modifiez Product.jsx.

Le projet "Product Configurator" de la vidéo précédente est un excellent exemple de cette composition. Le composant Experience assemble des composants drei comme <Stage> et <PresentationControls> avec le composant personnalisé <Chair>.

Conclusion

Félicitations ! Vous venez d'apprendre le principe le plus important pour passer de petites démos à des applications 3D robustes et professionnelles.

Voici les points clés à retenir :

• Pensez en composants : Une scène R3F est un arbre de composants React, tout comme une interface web.
• Décomposez la complexité : Isolez les objets, les systèmes (comme l'éclairage) et les modèles complexes dans leurs propres composants réutilisables.
• Adoptez une structure claire : Séparez la configuration du <Canvas> du contenu de la scène. Une structure App > Canvas > Experience est un excellent point de départ.
• Utilisez gltfjsx : C'est l'outil standard pour transformer vos modèles 3D en composants React performants et faciles à manipuler.

Avec cette mentalité d'architecte logiciel, vous êtes prêt à construire des projets 3D qui sont non seulement beaux et performants, mais aussi propres, organisés et agréables à développer.

Aperçu de la prochaine leçon :

Dans la prochaine leçon, nous mettrons en pratique cette architecture. Nous allons assembler une scène de présentation de produit complète en créant et en combinant nos composants pour le modèle, l'éclairage et l'environnement. Nous allons poser les fondations statiques de notre projet final.