Animations et propriétés visuelles basées sur l'état des composants React

1. Le besoin de centraliser l'état : "Lifting State Up"

Dans la dernière leçon, notre cube changeait de couleur au survol parce que son état hovered était géré à l'intérieur de son propre composant.

// Leçon précédente : état local
function InteractiveCube() {
  const [hovered, setHover] = useState(false); // État local
  // ...
  return <mesh onPointerOver={() => setHover(true)} ...>
    <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
  </mesh>
}

Mais que se passerait-il si nous voulions :

• Un bouton en dehors du <Canvas> qui change la couleur du cube ?
• Cliquer sur un cube pour qu'un autre cube change de forme ?

Dans ces cas, l'état ne peut plus être local à un seul composant. Il doit être "remonté" (lifted up) à leur plus proche ancêtre commun. C'est un principe fondamental de React qui s'applique parfaitement à R3F.

Comme vous débutez avec React, rafraîchissons notre mémoire sur le rôle essentiel de useState. Ce hook ne sert pas juste à stocker une valeur ; il est le mécanisme qui permet à React de savoir qu'il doit re-dessiner l'interface (ou la scène 3D) lorsque cette valeur change.

2. Le flux de données : État -> Props -> Scène 3D

Maintenant que nous sommes à l'aise avec useState, voici le modèle que nous allons mettre en place pour piloter notre scène :

1. Définir l'état dans le composant parent (celui qui contient le <Canvas> et l'interface 2D).
2. Passer la variable d'état comme prop au composant 3D enfant. Le composant 3D devient alors "contrôlé" par ses props.
3. Utiliser la fonction de mise à jour de l'état (set...) dans les gestionnaires d'événements de l'interface 2D (ex: onClick d'un bouton HTML).

Atelier pratique : Un contrôleur de scène simple

Mettons cela en pratique. Nous allons créer une scène avec un cube dont la couleur et l'état d'animation (actif/inactif) sont contrôlés par des boutons HTML.

1. Créez un composant pour le cube qui accepte des props.
   Ce composant ne gère plus son propre état. Il est "passif" et ne fait qu'afficher ce que ses props lui disent de faire.

   // Cube.js
   import { useRef } from 'react';
   import { useFrame } from '@react-three/fiber';
   
   export function Cube({ position, size, color, active }) {
     const ref = useRef();
   
     // L'animation dépend de la prop 'active'
     useFrame((state, delta) => {
       if (active) {
         ref.current.rotation.x += delta;
         ref.current.rotation.y += delta * 0.5;
       }
     });
   
     return (
       <mesh ref={ref} position={position}>
         <boxGeometry args={size} />
         {/* La couleur est directement lue depuis la prop */}
         <meshStandardMaterial color={color} />
       </mesh>
     );
   }
   

2. Mettez en place le composant parent avec l'état et l'interface.
   C'est ici que la logique de contrôle réside.

   // App.js
   import { useState } from 'react';
   import { Canvas } from '@react-three/fiber';
   import { OrbitControls } from '@react-three/drei';
   import { Cube } from './Cube';
   
   export default function App() {
     // 1. Définir les états dans le parent
     const [isActive, setActive] = useState(false);
     const [color, setColor] = useState('orange');
   
     return (
       <>
         {/* 3. L'interface 2D qui met à jour l'état */}
         <div style={{ position: 'absolute', zIndex: 1, top: 20, left: 20 }}>
           <button onClick={() => setActive(!isActive)}>
             Toggle Animation
           </button>
           <button onClick={() => setColor(color === 'orange' ? 'hotpink' : 'orange')}>
             Change Color
           </button>
           <p>Le cube est {isActive ? 'actif' : 'inactif'}</p>
         </div>
   
         <Canvas camera={{ position: [0, 0, 4] }}>
           <ambientLight intensity={0.5} />
           <pointLight position={[10, 10, 10]} />
           
           {/* 2. Passer les états comme props au composant 3D */}
           <Cube 
             position={[0, 0, 0]} 
             size={[1, 1, 1]} 
             color={color}
             active={isActive}
           />
           
           <OrbitControls />
         </Canvas>
       </>
     );
   }
   

Essayez de recréer cet exemple. Vous verrez que les boutons, qui sont de simples éléments HTML, contrôlent maintenant entièrement l'apparence et le comportement de l'objet dans la scène 3D. C'est la magie de l'intégration de Three.js dans l'écosystème React.

Comme le souligne l'article suivant, cette intégration est l'un des plus grands avantages de R3F.

3. Aller plus loin : Déclencher des effets avec useEffect

Parfois, un changement d'état ne doit pas seulement changer une propriété, mais déclencher une action ou un effet de bord. Par exemple, lorsque le cube devient "actif", on pourrait vouloir lancer une animation GSAP complexe, jouer un son, ou faire un appel réseau.

C'est là que le hook useEffect entre en jeu. Il vous permet d'exécuter du code en réaction aux changements de props ou d'état.

Sa signature est : useEffect(callback, [dependencies])

• callback: La fonction à exécuter.
• dependencies: Un tableau de variables. Le callback ne sera ré-exécuté que si l'une de ces variables a changé depuis le dernier rendu.

Exemple d'utilisation dans notre cas :
Imaginons que nous voulions afficher un message dans la console uniquement lorsque l'état isActive change. Dans notre composant App, nous pourrions ajouter :

import React, { useState, useEffect } from 'react';

// ...
export default function App() {
  const [isActive, setActive] = useState(false);
  const [color, setColor] = useState('orange');

  // Ce code s'exécutera à chaque fois que `isActive` change.
  useEffect(() => {
    console.log(`L'état d'animation a changé. Le cube est maintenant : ${isActive ? 'actif' : 'inactif'}`);
    
    // C'est ici qu'on pourrait lancer une animation GSAP, par exemple.
    
  }, [isActive]); // <-- Le tableau de dépendances

  // ... reste du code
}

useEffect est un outil puissant pour orchestrer des logiques plus complexes qui vont au-delà de la simple modification de props.

Conclusion

Félicitations ! Vous avez fait un grand pas en avant en connectant le monde du DOM 2D à votre scène 3D. Vous maîtrisez maintenant le flux de données essentiel pour créer des applications web 3D véritablement interactives.

Points clés à retenir :

• Pour qu'un état soit partagé entre plusieurs composants (3D ou 2D), il doit être "remonté" à leur ancêtre commun (Lifting State Up).
• Le flux de données est simple : l'état est défini dans le parent, passé comme props aux enfants 3D, et mis à jour par des événements sur les éléments d'UI.
• Un composant 3D qui reçoit ses propriétés via des props est un composant contrôlé, ce qui le rend prévisible et réutilisable.
• useState est le hook central pour gérer l'état qui provoque des re-rendus.
• useEffect est utilisé pour déclencher des effets de bord (comme des animations complexes ou des logs) en réponse à un changement d'état ou de props.

Aperçu de la prochaine leçon :
Nous savons maintenant piloter notre scène avec des états définis dans notre code. Mais pendant le développement, il est souvent fastidieux de devoir changer une valeur dans le code, sauvegarder et attendre le rechargement pour voir le résultat. Dans la prochaine leçon, nous allons intégrer un panneau de contrôle Leva, qui nous permettra de déboguer et de modifier les paramètres de notre scène en temps réel, directement depuis le navigateur. C'est un outil indispensable pour un flux de travail efficace.