Communication 3D-2D : Scène et Interface Utilisateur (HTML/CSS)

1. Le Principe Fondamental : L'État Partagé

La clé pour faire communiquer le monde 2D (vos composants React classiques) et le monde 3D (vos composants à l'intérieur du <Canvas>) est simple : ils doivent partager un état React.

Puisque les deux "mondes" sont des composants React, ils peuvent tous deux lire et mettre à jour le même état. Quand l'interface 2D met à jour l'état, le composant 3D qui lit cet état se re-rendra avec les nouvelles valeurs, et vice-versa.

Il existe deux patrons d'architecture principaux pour y parvenir :

1. Le "State Lift-up" (Remontée d'état) : L'état est géré dans le composant parent le plus proche qui englobe à la fois l'UI 2D et la scène 3D. L'état et les fonctions pour le modifier sont ensuite passés en props.
2. Le "React Context" : L'état est placé dans un fournisseur de contexte qui englobe toute l'application. N'importe quel composant, qu'il soit en 2D ou en 3D, peut alors "consommer" cet état sans avoir besoin de le recevoir via les props.

Commençons par le plus simple.

2. Patron n°1 : La Remontée d'État (State Lift-up)

Cette approche est idéale pour des interactions simples. L'idée est de déclarer votre useState dans un composant qui contient à la fois votre UI HTML et votre <Canvas>.

Cet article, bien que simple, illustre parfaitement ce concept.

Analysons la structure du code que vous venez de voir :

// Fichier `App.js` ou un composant parent
import { useState } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";

export default function App() {
  // 1. L'état est déclaré dans le parent commun.
  const [isRotating, setIsRotating] = useState(true);

  return (
    <>
      {/* 2. L'UI 2D (un simple bouton) modifie l'état. */}
      <button onClick={() => setIsRotating(!isRotating)}>
        {isRotating ? "Stop" : "Start"} Rotation
      </button>

      {/* 3. Le composant Canvas contient la scène 3D */}
      <Canvas>
        {/* 4. La valeur de l'état est passée en prop au composant 3D. */}
        <Box rotate={isRotating} position={[-1.2, 0, 0]} />
        <Box rotate={isRotating} position={[1.2, 0, 0]} />
      </Canvas>
    </>
  );
}

Dans le composant Box, le hook useFrame utiliserait cette prop rotate pour décider d'appliquer ou non la rotation à chaque frame. C'est simple, direct et très efficace pour des besoins ciblés.

3. Patron n°2 : Le React Context (La Solution Évolutive)

Lorsque votre application grandit, passer des props à travers de multiples couches de composants (ce qu'on appelle le "prop drilling") devient fastidieux. C'est là que le React Context brille. Il agit comme un "magasin" d'état global accessible de n'importe où.

C'est le patron de choix pour des applications complexes comme un configurateur de produit, où de nombreux composants 2D (choix de couleurs, de textures, d'options) doivent affecter de nombreuses parties du modèle 3D.

La vidéo suivante est un excellent tutoriel qui construit un configurateur de chaise de A à Z en utilisant ce patron.

Maintenant que l'UI est en place, créons le système qui la rendra vivante.

Étape 1 : Créer le Contexte

Le "cerveau" de notre système sera un contexte React. C'est un composant qui va contenir tous nos états (useState) et les rendre disponibles à tous ses enfants.

Étape 2 : Connecter l'UI 2D et la Scène 3D

Une fois le Provider enroulé autour de notre application, l'UI 2D peut utiliser le hook useCustomization pour modifier l'état, et la scène 3D peut l'utiliser pour lire cet état et se mettre à jour. C'est la magie du Context.

Ce patron est extrêmement puissant et constitue la base de la plupart des applications R3F professionnelles.

4. Communication par le Défilement (Scrolling)

Une autre forme de communication très populaire consiste à lier le défilement (scroll) d'une page HTML à des animations dans la scène 3D. L'utilisateur fait défiler une page de présentation, et en arrière-plan, la caméra bouge, des objets apparaissent, etc.

La librairie drei facilite cela avec le composant ScrollControls.

La vidéo ci-dessous montre comment une action sur l'UI 2D (ouvrir un menu) peut directement influencer la caméra 3D. Cela renforce notre principe d'état partagé.

C'est une excellente démonstration de la façon dont un état simple, géré au niveau de l'UI, peut avoir un impact direct et sophistiqué sur le monde 3D.

Conclusion

Aujourd'hui, vous avez appris la compétence la plus importante pour construire des applications 3D interactives complètes : faire dialoguer l'interface utilisateur 2D et la scène 3D.

Points clés à retenir :

• La communication entre la 2D et la 3D se fait toujours via un état React partagé.
• Pour des interactions simples, la remontée d'état (useState dans un parent commun) est efficace et facile à mettre en place.
• Pour des applications complexes, le React Context est la solution la plus robuste et évolutive. Il permet de centraliser l'état et d'y accéder de n'importe où sans "prop drilling".
• Ces patrons permettent de construire des fonctionnalités puissantes comme des configurateurs de produits, des portfolios animés au scroll, et bien plus encore.

Aperçu de la prochaine leçon :

Maintenant que nous savons créer des scènes complexes et interactives, une nouvelle préoccupation émerge : la performance. Une scène avec de nombreux objets, des lumières et des ombres peut rapidement devenir lente. Dans la prochaine leçon, nous aborderons les techniques d'optimisation essentielles pour garantir que vos applications restent fluides et réactives, même sur des appareils moins puissants. Nous parlerons de React.memo, useMemo et d'une technique cruciale en 3D : l'instanciation (InstancedMesh).