Hãy cùng khám phá cách xử lý sự kiện chuột, bàn phím và cảm ứng trong React Three Fiber để làm cho cảnh 3D của chúng ta trở nên tương tác và sống động hơn.

Chuột

Meshes có một số sự kiện mà chúng ta có thể sử dụng để xử lý các sự kiện chuột.

Để phát hiện khi nào chuột ở trên một mesh, chúng ta có thể sử dụng các sự kiện onPointerEnter và onPointerLeave.

Hãy thay đổi màu sắc của hình cầu của chúng ta khi chuột ở trên nó.

Chúng ta bắt đầu bằng việc tạo ra một state để lưu trữ xem chuột có đang ở trên hình cầu hay không:

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

Sau đó, chúng ta thêm các sự kiện onPointerEnter và onPointerLeave lên component <mesh />:

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

Cuối cùng, chúng ta thay đổi điều kiện màu sắc của material dựa trên giá trị state hovered:

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

Bây giờ, hình cầu sẽ chuyển sang màu hồng khi chuột ở trên nó.

Chúng ta cũng có thể phát hiện khi chuột được nhấp vào một mesh bằng cách sử dụng sự kiện onClick.

Chúng ta thêm một state để lưu trữ xem hình cầu có được chọn hay không:

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

Sau đó, thêm sự kiện onClick lên component <mesh />:

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

Chúng ta đặt state selected thành giá trị ngược lại với giá trị hiện tại của nó.

Cuối cùng, chúng ta thay đổi điều kiện màu sắc của material dựa trên giá trị 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>
);

Tôi đã quyết định sử dụng một biến để lưu trữ màu sắc nhằm làm cho mã trở nên dễ đọc hơn là sử dụng hai toán tử điều kiện.

Sự kiện nổi lên

Hãy thêm một quả cầu lớn phía sau ba quả cầu của chúng ta.

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

Nếu chúng ta di chuột qua quả cầu ở giữa, chúng ta có thể thấy rằng quả cầu lớn cũng bị ảnh hưởng bởi sự kiện onPointerEnter và onPointerLeave. Đó là vì những sự kiện đó đang nổi lên.

Tia ray được sử dụng bởi React Three Fiber để phát hiện sự kiện chuột đi qua quả cầu giữa và sau đó qua quả cầu lớn.

Để ngăn sự kiện khỏi nổi lên, chúng ta có thể sử dụng stopPropagation trên event.