Trong bài học này, chúng ta sẽ khám phá các hook useThree và useFrame được cung cấp bởi React Three Fiber, cách sử dụng và khi nào nên sử dụng chúng.

useThree

useThree cho phép truy cập vào mô hình state chứa renderer mặc định, scene, camera, kích thước viewport, và nhiều thứ khác.

Mặc dù tôi sẽ giải thích từng thuộc tính state mà chúng ta sẽ sử dụng vào thời điểm thích hợp, bạn có thể tìm thấy danh sách đầy đủ các thuộc tính trong tài liệu.

Để sử dụng, chúng ta cần import từ @react-three/fiber, và sau đó gọi nó bên trong component của chúng ta:

Copy
import { Canvas, useThree } from "@react-three/fiber";
// ...

const Cube = (props) => {
  const { camera } = useThree();
  // ...
};

// ...

Cách sử dụng useThree này hoạt động, nhưng nó sẽ khiến component tái render khi có các giá trị khác thay đổi ngoài các giá trị chúng ta đã lấy bằng destructuring.

Thay vào đó, chúng ta có thể sử dụng mô hình selector để chỉ lấy những giá trị cần thiết:

Copy
import { Canvas, useThree } from "@react-three/fiber";

const Cube = (props) => {
  const camera = useThree((state) => state.camera);
  // ...
};

Bằng cách này, component sẽ chỉ tái render khi giá trị camera thay đổi.

Lưu ý rằng các giá trị nội bộ của threejs không phải là reactive. Nếu camera.position thay đổi, component sẽ không tái render. (May mắn là vậy)

Bây giờ chúng ta có quyền truy cập vào camera, chúng ta có thể điều chỉnh fov (field of view) để zoom vào hoặc ra:

Copy
// ...

const Cube = (props) => {
  const camera = useThree((state) => state.camera);

  const updateFov = (fov) => {
    camera.fov = fov;
    camera.updateProjectionMatrix();
  };

  useControls("FOV", {
    smallFov: button(() => updateFov(20)),
    normalFov: button(() => updateFov(42)),
    bigFov: button(() => updateFov(60)),
    hugeFov: button(() => updateFov(110)),
  });

  // ...
};

// ...

Ghi chú:

• phương thức updateProjectionMatrix là cần thiết để báo cho threejs biết rằng camera đã thay đổi và cần được cập nhật.
• bằng cách truyền một giá trị chuỗi như tham số đầu tiên cho useControls, chúng ta có thể nhóm các thuộc tính theo thư mục.

Trường nhìn của camera chúng ta được cập nhật chính xác từ các điều khiển

useFrame

Threejs là một thư viện dựa trên render-loop. Điều này có nghĩa là những gì chúng ta thấy trên màn hình là kết quả của một vòng lặp mà render cảnh trong mỗi frame. Giống như video là một chuỗi hình ảnh, thì một cảnh 3D là một chuỗi các frame.

Hook useFrame cho phép chúng ta thực thi mã trên mỗi frame được render, như là chạy các hiệu ứng, cập nhật controls, và animations.

Khi nhắm tới 60fps, callback sẽ được gọi 60 lần mỗi giây.