Gestion des événements souris sur les meshes JSX

1. Les bases des événements dans R3F

Si vous avez déjà utilisé des événements comme onClick sur un bouton en HTML/React, la transition vers React Three Fiber (R3F) va vous sembler naturelle. R3F mappe des gestionnaires d'événements similaires directement sur les objets de votre scène 3D.

Les événements les plus courants sont :

• onClick : Se déclenche lors d'un clic complet (pression + relâchement) sur l'objet.
• onPointerOver / onPointerEnter : Se déclenche lorsque le pointeur de la souris entre dans la zone de l'objet.
• onPointerOut / onPointerLeave : Se déclenche lorsque le pointeur quitte la zone de l'objet.
• onPointerDown : Se déclenche dès que le bouton de la souris est pressé sur l'objet.
• onPointerUp : Se déclenche dès que le bouton de la souris est relâché.
• onPointerMove : Se déclenche lorsque le pointeur se déplace au-dessus de l'objet.

La manière la plus simple de les utiliser est de les combiner avec le hook useState de React pour suivre l'état d'interaction d'un objet (par exemple, "est survolé" ou "est cliqué") et de modifier ses propriétés en conséquence.

Pour illustrer ce principe, l'exemple fondamental de la documentation de R3F est idéal.

Ce que cet exemple démontre est au cœur de l'interactivité avec R3F :

1. Déclarer un état : const [hovered, setHover] = useState(false) crée une variable d'état pour savoir si la souris survole l'objet.
2. Mettre à jour l'état : Les callbacks onPointerOver={() => setHover(true)} et onPointerOut={() => setHover(false)} modifient cet état.
3. Réagir au changement d'état : Les propriétés du mesh sont liées à cet état. Par exemple, <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /> change la couleur de l'objet de manière conditionnelle.

C'est un flux de données unidirectionnel classique de React, mais appliqué à des objets 3D.

2. Explorer l'objet événement et sa propagation

Comme pour les événements du DOM, chaque gestionnaire d'événement dans R3F reçoit un objet événement (souvent nommé e ou event). Cet objet est une mine d'informations sur l'interaction qui vient de se produire.

Pour vous familiariser avec les données que vous pouvez extraire, la ressource suivante est une excellente référence.

Parmi les propriétés les plus utiles, on trouve :

• event.object : L'objet Three.js qui a été intersecté.
• event.point : Un Vector3 représentant le point exact de l'intersection sur la surface de l'objet.
• event.distance : La distance entre la caméra et le point d'intersection.
• event.stopPropagation() : Une fonction pour arrêter la propagation de l'événement.

La propagation des événements (bubbling)

Ce dernier point, stopPropagation(), est crucial. En tant que développeur web, vous connaissez probablement le "bubbling" : un événement sur un élément enfant "remonte" vers ses parents. Dans R3F, le principe est identique mais appliqué à la hiérarchie de la scène. Si vous avez un <mesh> à l'intérieur d'un <group>, un clic sur le mesh déclenchera aussi l'événement onClick du groupe.

Il est souvent souhaitable d'empêcher ce comportement pour ne traiter l'événement que sur l'objet le plus proche.

3. Atelier pratique : Créer un cube interactif

Mettons tout cela en pratique. Nous allons créer un composant InteractiveCube qui change de couleur au survol et qui affiche des informations dans la console lors d'un clic.

1. Créez un nouveau composant InteractiveCube.js dans votre projet.
2. Structurez le composant avec un état pour le survol et les gestionnaires d'événements.

import React, { useState } from 'react';
import { useFrame } from '@react-three/fiber';

function InteractiveCube(props) {
  // State pour gérer l'état de survol
  const [hovered, setHover] = useState(false);
  
  // State pour gérer l'état de clic
  const [active, setActive] = useState(false);

  return (
    <mesh
      {...props} // Applique les props passées (comme la position)
      scale={active ? 1.5 : 1} // Grossit le cube s'il est actif
      onClick={(event) => {
        // Arrête la propagation pour ne pas affecter d'autres objets
        event.stopPropagation();
        setActive(!active);
        console.log(`Objet cliqué : ${event.object.name}`);
        console.log(`Distance de la caméra : ${event.distance.toFixed(2)}`);
        console.log(`Point d'intersection :`, event.point);
      }}
      onPointerOver={(event) => {
        event.stopPropagation();
        setHover(true);
      }}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  );
}

export default InteractiveCube;

3. Intégrez-le dans votre scène principale :

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

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      
      <InteractiveCube position={[-1.5, 0, 0]} name="Cube Gauche" />
      <InteractiveCube position={[1.5, 0, 0]} name="Cube Droit" />

      <OrbitControls />
    </Canvas>
  );
}

Maintenant, lancez votre application. Vous devriez pouvoir survoler les cubes pour changer leur couleur, et cliquer dessus pour voir leur échelle changer et des informations s'afficher dans la console du navigateur.

Pour une démonstration plus dynamique de ces concepts dans un projet réel, la vidéo suivante est très instructive.

Conclusion

Félicitations ! Vous venez de débloquer une dimension essentielle du développement 3D avec React : l'interactivité. Vous pouvez maintenant créer des expériences où l'utilisateur n'est plus un simple spectateur, mais un acteur dans la scène.

Points clés à retenir :

• React Three Fiber expose des props d'événements (onClick, onPointerOver, etc.) directement sur les composants de mesh, de la même manière que React le fait pour les éléments du DOM.
• Le hook useState est l'outil principal pour gérer les états d'interaction (survolé, cliqué, etc.).
• Ces états peuvent être utilisés pour modifier conditionnellement n'importe quelle propriété de vos objets 3D (couleur, échelle, position...).
• L'objet event fourni par les callbacks contient des informations précieuses sur l'interaction (point d'impact, distance, etc.).
• event.stopPropagation() permet de contrôler la propagation des événements dans la hiérarchie de la scène, un concept familier du développement web.

Aperçu de la prochaine leçon :
Nous savons maintenant détecter les clics et les survols. Dans la prochaine leçon, nous irons plus loin en apprenant à piloter des animations ou des propriétés visuelles à partir de l'état global d'un composant React. Nous verrons comment un clic peut déclencher une animation complexe au lieu d'un simple changement de couleur, rendant nos scènes encore plus dynamiques et vivantes.