Untuk memposisikan dan menganimasikan kamera dalam skena 3D, kami menemukan beberapa cara untuk melakukannya:

• Menetapkan posisi dan rotasi kamera secara manual.
• Menggunakan berbagai jenis kontrol, seperti OrbitControls.

Namun terkadang, kita memerlukan kontrol lebih atas kamera, dan itu membutuhkan banyak kode dan perhitungan untuk melakukannya dengan benar. Untungnya, ada perpustakaan yang dapat membantu kita dengan hal itu.

Yang akan kita gunakan disebut camera-controls. Ini adalah perpustakaan kecil yang memungkinkan kita untuk melakukan berbagai gerakan dan animasi kamera dengan sangat mudah.

Kebetulan, Drei memiliki wrapper untuk perpustakaan ini, jadi kita dapat menggunakannya dengan beberapa baris kode.

Proyek Pemula

Untuk menemukan berbagai fitur dari perpustakaan ini, kita akan membuat slider 3D yang bagus untuk memamerkan iPhone 15 Pro Max Black yang baru.

Silakan hubungi saya ketika iPhone 16 dirilis sehingga saya dapat memperbarui pelajaran ini 🤭

Proyek pemula ini berisi:

• Model Apple iPhone 15 Pro Max Black oleh polyman. Dilisensikan di bawah Creative Commons Attribution.
• Komponen UI yang berisi slider yang dibuat dengan Tailwind CSS yang akan kita tambahkan kemudian ke proyek.

Saat ini kita hanya dapat melihat model iPhone

Mari mulai bermain dengan kontrol kamera.

Kontrol

Untuk mengaktifkan kontrol kamera, kita perlu mengganti OrbitControls yang sudah ada dalam proyek awal dengan komponen CameraControls dari Drei.

Kita juga akan menambahkan referensi ke kontrol tersebut agar kita bisa mengaksesnya nanti dan menggunakan metodenya.

Experience.jsx:

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

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

Sebagai gantinya, Anda sekarang dapat mengakses komponen CameraControls dengan hook useThree dari react-three-fiber. Informasi lebih lanjut ada di dokumentasi.

Dengan melakukan ini, kita tidak dapat melihat perbedaan besar dengan OrbitControls. Kita masih dapat memutar, menggeser, dan memperbesar kamera.

API juga memiliki banyak kontrol yang sama seperti distance, zoom, polarAngle, azimuthAngle, ...

Dimana komponen CameraControls unggul adalah ketika kita ingin menganimasikan kamera.

Kita tidak akan membahas semua kontrol yang tersedia, tetapi kita akan melihat yang paling umum. Anda dapat menemukan daftar lengkapnya di dokumentasi camera-controls.

Dolly

Kontrol dolly memungkinkan kita untuk menggerakkan kamera maju dan mundur.

Mari kita gunakan Leva untuk menambahkan tombol agar kamera bisa bergerak maju dan mundur:

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

Argumen pertama dari metode dolly adalah jarak yang kita inginkan untuk menggerakkan kamera. Argumen kedua adalah boolean yang menunjukkan apakah kita ingin menganimasikan pergerakan tersebut atau tidak.

Kamera kita sekarang bisa bergerak maju dan mundur

Jika kita ingin mencapai hasil yang sama dengan OrbitControls, kita harus menghitung posisi baru kamera dan target. Kemudian kita harus menganimasikan kamera dan target ke posisi barunya.

Truck

Kontrol truck memungkinkan kita untuk menggerakkan kamera ke atas, bawah, kiri, dan kanan tanpa mengubah orientasi kamera.

Seperti yang kita lakukan dengan kontrol dolly, mari tambahkan tombol untuk bereksperimen dengan kontrol 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);
    }),
  });
  // ...
};

Dua argumen pertama dari metode truck adalah jarak horizontal dan vertical yang ingin kita gerakkan kamera. Argumen ketiga adalah boolean yang menunjukkan apakah kita ingin animasi gerakan atau tidak.

Anda bisa menggunakan nilai yang berbeda untuk jarak horizontal dan vertical untuk menggerakkan kamera secara diagonal.

Memutar

Camera Controls menyediakan cara untuk memutar kamera secara terprogram di sekitar targetnya, seperti gerakan yang kita lakukan saat menggeser mouse dengan OrbitControls.

Mari tambahkan tombol untuk memutar kamera di sekitar targetnya:

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

Argumen dari metode rotate adalah:

• azimuthAngle: sudut horizontal dalam radian.
• polarAngle: sudut vertikal dalam radian.
• enableTransition: boolean yang menunjukkan apakah kita ingin menganimasikan gerakan tersebut atau tidak.

Waktu Halus

Untuk mengontrol waktu animasi ketika kita menggunakan argumen enableTransition, kita bisa menggunakan properti smoothTime.