Để định vị và điều khiển camera trong cảnh 3D, chúng ta đã khám phá một vài cách để thực hiện điều đó:

• Thiết lập thủ công vị trí và hướng xoay của camera.
• Sử dụng các loại điều khiển khác nhau, như OrbitControls.

Nhưng đôi khi, chúng ta cần kiểm soát camera nhiều hơn, và điều đó đòi hỏi một lượng lớn mã và tính toán để thực hiện đúng. May mắn thay, có những thư viện có thể giúp chúng ta với điều đó.

Thư viện mà chúng ta sẽ sử dụng có tên là camera-controls. Đây là một thư viện nhỏ cho phép chúng ta thực hiện nhiều chuyển động và hoạt ảnh cho camera rất dễ dàng.

Tình cờ, Drei có một lớp bọc cho thư viện này, vì vậy chúng ta có thể sử dụng nó chỉ với vài dòng mã.

Dự án khởi đầu

Để khám phá các tính năng khác nhau của thư viện này, chúng ta sẽ tạo một slider 3D đẹp mắt để trưng bày chiếc iPhone 15 Pro Max Black mới.

Hãy liên hệ với tôi khi iPhone 16 được phát hành để tôi có thể cập nhật bài học này 🤭

Dự án khởi đầu bao gồm:

• Mô hình Apple iPhone 15 Pro Max Black của polyman. Được cấp phép theo Creative Commons Attribution.
• Một thành phần UI chứa slider được tạo với Tailwind CSS mà chúng ta sẽ thêm vào dự án sau.

Hiện tại chúng ta chỉ có thể thấy mô hình iPhone

Hãy bắt đầu thử nghiệm với các điều khiển camera.

Điều khiển

Để kích hoạt điều khiển camera, chúng ta cần thay thế OrbitControls đã có trong dự án khởi động bằng CameraControls từ Drei.

Chúng ta cũng sẽ thêm một tham chiếu tới điều khiển để có thể truy cập sau và sử dụng các phương thức của nó.

Experience.jsx:

Copy
// ...
import { CameraControls } from "@react-three/drei";
import { useRef } from "react";

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

Thay vì một tham chiếu, bây giờ bạn có thể truy cập vào thành phần CameraControls với hook useThree từ react-three-fiber. Thông tin thêm có trong tài liệu.

Bằng cách làm này, chúng ta sẽ không nhận thấy sự khác biệt lớn nào với OrbitControls. Chúng ta vẫn có thể xoay, pan và zoom camera.

API cũng có nhiều điều khiển chung như distance, zoom, polarAngle, azimuthAngle,...

Nơi CameraControls thể hiện sự vượt trội là khi chúng ta muốn tạo hoạt ảnh cho camera.

Chúng ta sẽ không đi qua tất cả các điều khiển có sẵn, nhưng sẽ thấy những điều khiển phổ biến nhất. Bạn có thể tìm thấy danh sách đầy đủ trong tài liệu camera-controls.

Dolly

Control dolly cho phép chúng ta di chuyển camera tiến và lùi.

Hãy sử dụng Leva để thêm các nút di chuyển camera tiến và lùi:

Copy
// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

Tham số đầu tiên của phương thức dolly là khoảng cách mà chúng ta muốn di chuyển camera. Tham số thứ hai là một giá trị boolean cho biết chúng ta có muốn tạo hoạt ảnh cho chuyển động hay không.

Camera của chúng ta giờ có thể di chuyển tiến và lùi

Nếu chúng ta muốn đạt được kết quả tương tự với OrbitControls, chúng ta sẽ phải tính toán vị trí mới của camera và mục tiêu. Sau đó, chúng ta sẽ phải tạo hoạt ảnh cho camera và mục tiêu đến các vị trí mới của chúng.

Truck

Điều khiển truck cho phép chúng ta di chuyển camera lên, xuống, trái và phải mà không thay đổi hướng của camera.

Như chúng ta đã làm với điều khiển dolly, hãy thêm các nút để thử nghiệm điều khiển truck:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

Hai đối số đầu tiên của phương thức truck là khoảng cách horizontal và vertical mà chúng ta muốn di chuyển camera. Đối số thứ ba là một giá trị boolean chỉ định liệu chúng ta có muốn thực hiện chuyển động mượt hay không.

Bạn có thể sử dụng các giá trị khác nhau cho khoảng cách horizontal và vertical để di chuyển camera theo đường chéo.

Xoay

Camera Controls cung cấp một cách để lập trình xoay camera xung quanh mục tiêu của nó giống như chuyển động chúng ta thực hiện khi kéo chuột với OrbitControls.

Hãy thêm các nút để xoay camera xung quanh mục tiêu của nó:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

Các tham số của phương thức rotate là:

• azimuthAngle: góc ngang tính bằng radians.
• polarAngle: góc dọc tính bằng radians.
• enableTransition: một giá trị boolean cho biết chúng ta có muốn thực hiện chuyển động mượt mà hay không.

Thời gian mượt mà

Để kiểm soát thời gian hoạt hình khi chúng ta sử dụng tham số enableTransition, chúng ta có thể sử dụng thuộc tính smoothTime.