Scopriamo come gestire gli eventi di mouse, tastiera e tocco in React Three Fiber per rendere la nostra scena 3D più interattiva e immersiva.

Mouse

I mesh dispongono di alcuni eventi che possiamo utilizzare per gestire gli eventi del mouse.

Per rilevare quando il mouse è su un mesh, possiamo utilizzare gli eventi onPointerEnter e onPointerLeave.

Cambiamo il colore della nostra sfera quando il mouse è su di essa.

Iniziamo creando uno stato per memorizzare se il mouse è sopra la sfera o meno:

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

Quindi, aggiungiamo gli eventi onPointerEnter e onPointerLeave sul componente <mesh />:

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

Infine, cambiamo condizionalmente il colore del material basandoci sul valore dello stato hovered:

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

Ora, la sfera diventa rosa quando il mouse è su di essa.

Possiamo anche rilevare quando il mouse viene cliccato su un mesh usando l'evento onClick.

Aggiungiamo uno stato per memorizzare se la sfera è selezionata o meno:

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

Quindi, aggiungiamo l'evento onClick sul componente <mesh />:

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

Impostiamo lo stato selected sull'opposto del suo valore corrente.

Infine, cambiamo condizionalmente il colore del material basandoci sul valore dello stato 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>
);

Ho deciso di usare una variabile per memorizzare il colore per rendere il codice più leggibile rispetto all'utilizzo di due operatori ternari.

Eventi bubbling

Aggiungiamo una grande sfera dietro le nostre tre sfere.

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" />
    </>
  );
};

Se passiamo il mouse sopra la sfera centrale, possiamo vedere che anche la grande sfera viene influenzata dagli eventi onPointerEnter e onPointerLeave. Questo accade perché questi eventi sono in bubbling.

Il raggio proiettato utilizzato da React Three Fiber per rilevare gli eventi del mouse attraversa la sfera centrale e poi anche la grande sfera.

Per impedire che l'evento faccia bubbling, possiamo usare stopPropagation sull'event.