Découvrons comment gérer les événements de souris, de clavier et de tactile dans React Three Fiber pour rendre notre scène 3D plus interactive et immersive.

Souris

Les meshes ont quelques événements que nous pouvons utiliser pour gérer les événements de souris.

Pour détecter quand la souris est sur un mesh, nous pouvons utiliser les événements onPointerEnter et onPointerLeave.

Changeons la couleur de notre sphère lorsque la souris est dessus.

Nous commençons par créer un state pour stocker si la souris est sur la sphère ou non :

Copy
const [hovered, setHovered] = useState(false);

Ensuite, nous ajoutons les événements onPointerEnter et onPointerLeave sur le composant <mesh /> :

Copy
<mesh
  {...props}
  onPointerEnter={() => setHovered(true)}
  onPointerLeave={() => setHovered(false)}
>
  {/* ... */}
</mesh>

Enfin, nous changeons conditionnellement la couleur du material en fonction de la valeur du state hovered :

Copy
<meshStandardMaterial color={hovered ? "pink" : "white"} />

Maintenant, la sphère devient rose lorsque la souris est dessus.

Nous pouvons également détecter quand la souris clique sur un mesh en utilisant l'événement onClick.

Nous ajoutons un state pour stocker si la sphère est sélectionnée ou non :

Copy
const [selected, setSelected] = useState(false);

Ensuite, nous ajoutons l'événement onClick sur le composant <mesh /> :

Copy
<mesh
  {...props}
  onPointerEnter={() => setHovered(true)}
  onPointerLeave={() => setHovered(false)}
  onClick={() => setSelected(!selected)}
>
  {/* ... */}
</mesh>

Nous définissons le state selected à l'opposé de sa valeur actuelle.

Enfin, nous changeons conditionnellement la couleur du material en fonction de la valeur du state active :

Copy
let color = hovered ? "pink" : "white";
if (selected) {
  color = "hotpink";
}

return (
  <mesh
    {...props}
    onPointerEnter={() => setHovered(true)}
    onPointerLeave={() => setHovered(false)}
    onClick={() => setSelected(!selected)}
  >
    <sphereGeometry args={[0.5, 64, 64]} />
    <meshStandardMaterial color={color} />
  </mesh>
);

J'ai décidé d'utiliser une variable pour stocker la couleur afin de rendre le code plus lisible que d'utiliser deux opérateurs ternaires.

Événements de propagation

Ajoutons une grande sphère derrière nos trois sphères.

Copy
// ...

export const Experience = () => {
  return (
    <>
      <MoveableSphere scale={3} position-z={-10} />
      <MoveableSphere />
      <MoveableSphere position-x={-2} />
      <MoveableSphere position-x={2} />
      <ContactShadows
        rotation-x={Math.PI / 2}
        position={[0, -1.6, 0]}
        opacity={0.42}
      />

      <Environment preset="sunset" />
    </>
  );
};

Si nous survolons la sphère du milieu, nous pouvons constater que la grande sphère est également affectée par les événements onPointerEnter et onPointerLeave. C'est parce que ces événements sont en propagation.

Le rayon projeté utilisé par React Three Fiber pour détecter les événements de la souris traverse la sphère du milieu puis la grande sphère.

Pour empêcher l'événement de se propager, nous pouvons utiliser stopPropagation sur l'événement.