Interaction Utilisateur: Inspection Produit

1. L'architecture de l'interactivité : Gérer un état partagé

Le défi principal est le suivant : comment un clic sur un bouton HTML peut-il modifier la couleur ou une partie d'un modèle 3D qui vit dans un <Canvas> R3F ? Ces deux mondes, le DOM et WebGL, sont distincts.

La solution en React est de créer une source de vérité unique (Single Source of Truth) accessible par les deux parties. Nous allons utiliser l'API Context de React pour cela. Le Contexte nous permettra de créer un "état global" pour les options de personnalisation, que nos composants 2D et 3D pourront lire et modifier.

Cette approche est très puissante car elle sépare la logique (l'état de la personnalisation) de la présentation (l'UI et le modèle 3D).

2. Mettre en place l'interface de configuration (UI)

Avant de gérer l'état, créons les boutons que l'utilisateur cliquera. Nous allons construire un panneau de configuration simple en HTML et CSS, qui sera positionné par-dessus notre canvas 3D.

À ce stade, vous devriez avoir un composant Configurator qui affiche des options statiques à l'écran. La prochaine étape est de leur donner vie.

3. Créer le Contexte de personnalisation

Nous allons maintenant créer notre "cerveau" : un Contexte React qui contiendra toutes les options de personnalisation (matériau, couleur, etc.) et les fonctions pour les modifier.

La structure habituelle pour un Contexte est :

1. Un fichier context/Customization.jsx qui définit le contexte.
2. Un CustomizationProvider qui utilise des useState pour gérer les données et les expose via le Contexte.
3. Un hook personnalisé useCustomization pour accéder facilement à ces données depuis n'importe quel composant.

Voici un résumé du code pour le fournisseur de contexte :

// dans context/Customization.jsx
import { createContext, useContext, useState } from "react";

const CustomizationContext = createContext({});

export const CustomizationProvider = (props) => {
  const [material, setMaterial] = useState("leather");
  const [legs, setLegs] = useState(1);
  // ... autres états pour les couleurs, etc.

  return (
    <CustomizationContext.Provider value={{ material, setMaterial, legs, setLegs }}>
      {props.children}
    </CustomizationContext.Provider>
  );
};

export const useCustomization = () => {
  return useContext(CustomizationContext);
};

4. Connecter l'UI et le modèle 3D

Maintenant que notre état est centralisé, il ne reste plus qu'à le "brancher" à nos composants.

1. Dans le composant UI (Configurator.jsx) : Nous allons utiliser useCustomization pour lire l'état actuel (afin de savoir quel bouton est actif) et pour obtenir les fonctions de mise à jour (à appeler sur onClick).
2. Dans le composant 3D (Chair.jsx) : Nous utiliserons également useCustomization pour lire l'état et ajuster l'apparence du modèle en conséquence (changer un matériau, la couleur, ou la visibilité d'une pièce).

C'est là que la magie opère. L'UI et le modèle 3D sont découplés, mais ils réagissent tous les deux aux mêmes changements d'état.

L'interaction est maintenant fonctionnelle ! Un clic sur un bouton dans l'UI met à jour le contexte, ce qui provoque un nouveau rendu du composant 3D avec les bonnes propriétés.

5. Aller plus loin : L'interaction directe avec les objets

Une autre façon d'inspecter un produit est de cliquer directement sur ses différentes parties. React Three Fiber rend cela aussi simple que d'ajouter un gestionnaire d'événements au DOM.

Vous pouvez attacher des gestionnaires d'événements comme onClick, onPointerOver (survol), onPointerOut, etc., directement sur vos balises <mesh>.

Voici un exemple pratique. Dans votre composant de chaise, vous pourriez faire en sorte que cliquer sur le coussin affiche son nom dans la console :

<mesh
  geometry={nodes.cushion.geometry}
  onClick={(event) => {
    // Empêche le clic de se propager aux objets derrière le coussin
    event.stopPropagation();
    console.log("Coussin cliqué !");
    // On pourrait ici mettre à jour un état pour zoomer sur cette partie
  }}
>
  <meshStandardMaterial {...materialProps} color={cushionColor.color} />
</mesh>

Cette méthode est parfaite pour des interactions comme la sélection d'une partie du produit pour en afficher les détails.

Conclusion

Félicitations ! Vous avez transformé une scène statique en une expérience interactive et dynamique. C'est une compétence fondamentale pour la création de showcases de produits, de configurateurs, ou de toute application 3D où l'utilisateur a le contrôle.

Les points clés de cette leçon sont :

• L'état partagé avec React Context : C'est la solution architecturale pour faire communiquer une UI 2D et une scène 3D.
• Le flux de données unidirectionnel : L'UI met à jour l'état, et la scène 3D réagit à cet état. C'est le principe fondamental de React appliqué à la 3D.
• Rendu conditionnel en 3D : Nous avons utilisé des propriétés comme visible et color de manière dynamique, basées sur l'état de l'application.
• Événements R3F : Nous avons découvert comment gérer les clics directement sur les objets 3D, ouvrant la porte à d'autres types d'interactions.

Aperçu de la prochaine leçon :

Notre application est maintenant presque complète ! La dernière étape majeure avant le déploiement est de s'assurer qu'elle fonctionne bien sur tous les écrans. Dans la prochaine leçon, "Assurer un affichage adaptatif (responsive) de la scène sur différentes tailles d'écran", nous apprendrons les techniques pour que notre expérience 3D soit aussi belle sur mobile que sur ordinateur.