Mari kita pelajari cara menangani event mouse, keyboard, dan sentuhan di React Three Fiber untuk membuat adegan 3D kita menjadi lebih interaktif dan imersif.

Mouse

Meshes memiliki beberapa event yang dapat kita gunakan untuk menangani event mouse.

Untuk mendeteksi ketika mouse berada di atas mesh, kita dapat menggunakan event onPointerEnter dan onPointerLeave.

Mari kita ubah warna bola kita ketika mouse berada di atasnya.

Kita mulai dengan membuat state untuk menyimpan apakah mouse berada di atas bola atau tidak:

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

Kemudian, kita tambahkan event onPointerEnter dan onPointerLeave pada komponen <mesh />:

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

Akhirnya, kita ubah warna material secara kondisional berdasarkan nilai state hovered:

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

Sekarang, bola berubah menjadi pink ketika mouse berada di atasnya.

Kita juga dapat mendeteksi ketika mouse diklik pada mesh menggunakan event onClick.

Kita tambahkan state untuk menyimpan apakah bola dipilih atau tidak:

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

Kemudian, kita tambahkan event onClick pada komponen <mesh />:

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

Kita atur state selected menjadi kebalikan dari nilai saat ini.

Akhirnya, kita ubah warna material secara kondisional berdasarkan nilai 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>
);

Saya memutuskan untuk menggunakan variabel untuk menyimpan warna agar kode lebih mudah dibaca daripada menggunakan dua operator ternary.

Peristiwa Bubbling

Mari kita tambahkan sebuah bola besar di belakang tiga bola kita.

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

Jika kita mengarahkan mouse ke bola tengah, kita bisa melihat bahwa bola besar juga terpengaruh oleh peristiwa onPointerEnter dan onPointerLeave. Ini karena peristiwa tersebut menggelembung.

Sinar yang digunakan oleh React Three Fiber untuk mendeteksi peristiwa mouse melewati bola tengah dan kemudian melalui bola besar.

Untuk mencegah peristiwa dari bubbling, kita bisa menggunakan stopPropagation pada event.