Dalam pelajaran ini, kita akan mempelajari apa itu hooks useThree dan useFrame yang disediakan oleh React Three Fiber, kapan dan bagaimana menggunakannya.

useThree

useThree memberikan akses ke model state yang berisi renderer default, scene, kamera, ukuran viewport, dan sebagainya.

Walaupun saya akan menjelaskan setiap properti state yang akan kita gunakan pada waktu yang tepat, Anda dapat menemukan daftar lengkap properti di dokumentasi.

Untuk menggunakannya, kita perlu mengimpornya dari @react-three/fiber, dan kemudian memanggilnya di dalam komponen kita:

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

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

// ...

Meskipun cara penggunaan useThree ini berfungsi, ini akan menyebabkan komponen melakukan re-render pada perubahan nilai lain selain dari yang kita dapatkan dari destructuring.

Sebagai gantinya, kita dapat menggunakan pola selector untuk hanya mendapatkan nilai yang kita butuhkan:

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

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

Dengan cara ini, komponen hanya akan melakukan re-render ketika nilai camera berubah.

Ingatlah bahwa nilai internal threejs tidak reaktif. Jika camera.position berubah, komponen tidak akan melakukan re-render. (Untungnya)

Sekarang kita memiliki akses ke kamera, kita dapat memodifikasi fov (field of view) untuk melakukan zoom in atau out:

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)),
  });

  // ...
};

// ...

Catatan:

• Metode updateProjectionMatrix diperlukan untuk memberi tahu threejs bahwa kamera telah berubah dan perlu diperbarui.
• Dengan memberikan nilai string sebagai parameter pertama ke useControls kita dapat mengelompokkan properti berdasarkan folder.

Field of View kamera kita diperbarui dengan benar dari kontrol

useFrame

Threejs adalah perpustakaan berbasis render-loop. Ini berarti bahwa apa yang kita lihat di layar adalah hasil dari loop yang merender scene pada setiap frame. Seperti video adalah urutan gambar, scene 3D adalah urutan frame.

Hook useFrame memungkinkan kita untuk menjalankan kode pada setiap frame yang dirender, seperti menjalankan efek, memperbarui kontrol, dan animasi.

Ketika menargetkan 60fps, callback akan dipanggil 60 kali per detik.