Dalam sebuah scene 3D, kamera adalah sudut pandang pengguna. Kamera yang menentukan apa yang pengguna lihat di layar.

Di threejs terdapat berbagai jenis kamera. Untuk saat ini kita akan membahas hanya 3 yang paling umum: perspective camera, orthographic camera, dan cube camera.

Sebelum membahas berbagai jenis kamera yang tersedia, mari tambahkan OrbitControls ke proyek kita.

Orbit controls

Orbit controls adalah serangkaian kontrol yang memungkinkan pengguna untuk menggerakkan kamera di sekitar scene.

Kita akan melihat cara penggunaannya secara mendalam nanti, tapi kita akan mulai menggunakannya dari sekarang agar bisa menggerakkan kamera untuk pemahaman yang lebih baik tentang berbagai jenis kamera.

Impor dan tambahkan komponen OrbitControls dari paket @react-three/drei ke komponen Canvas:

Copy
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <>
      <Canvas>
        <OrbitControls />
      </Canvas>
    </>
  );
}

Sekarang Anda dapat menggerakkan kamera di sekitar scene:

• Klik kiri + geser: untuk memutar kamera
• Roda mouse: untuk memperbesar dan memperkecil
• Klik kanan + geser: untuk menggeser kamera

Ini juga kompatibel dengan perangkat layar sentuh:

• Satu jari + geser: untuk memutar kamera
• Dua jari + cubit: untuk memperbesar dan memperkecil
• Dua jari + geser: untuk menggeser kamera

Kamera Perspektif

Dalam r3f, kamera default adalah perspective camera. Ini adalah kamera paling umum dalam aplikasi 3D karena mensimulasikan cara mata manusia melihat dunia.

Karena ini adalah kamera default, kita tidak perlu menambahkannya ke dalam scene. Kamera ini sudah ada dan kita dapat mengontrolnya dengan menambahkan prop camera ke dalam komponen Canvas:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

Namun, kamu juga bisa menambahkan kamera baru ke dalam scene secara manual.

Dan tambahkan komponen PerspectiveCamera di mana saja dalam komponen Canvas dengan prop makeDefault. Ini akan menjadikan kamera ini sebagai kamera default dari scene:

Copy
<Canvas>
  <PerspectiveCamera position={[0, 8, 0]} makeDefault />
</Canvas>

Sekarang kamera berada di puncak scene:

Secara default, kamera menghadap ke pusat scene: [0, 0, 0]. Kita akan melihat di pelajaran berikutnya bagaimana mengubah target kamera untuk animasi.

Kamera perspektif memiliki field of view, aspect ratio, dan near/far clipping plane.

Field of View

Field of view adalah sudut dari kamera. Ini adalah sudut dari sisi bawah ke sisi atas kamera.

Field of view didefinisikan dalam derajat. Nilai defaultnya adalah 75 derajat.

Ini adalah apa yang kita lihat saat ini dalam scene kita:

Sekarang mari kita ubah field of view menjadi 30 derajat:

Copy
<Canvas camera={{ position: [3, 3, 3], fov: 30 }}>
{/* ... */}

Atau

Copy
<Canvas>
  <PerspectiveCamera makeDefault position={[3, 3, 3]} fov={30} />
  {/* ... */}

Ini adalah apa yang kita lihat sekarang:

Dengan mengurangi field of view, kita sekarang melihat lebih sedikit dari scene dan objek-objek terlihat lebih besar. Ini seperti kita melakukan zoom in.

Aspect ratio

Aspect ratio adalah perbandingan antara lebar dan tinggi kamera. Ini didefinisikan sebagai width / height.

Nilai defaultnya adalah window.innerWidth / window.innerHeight.

Mari kita ubah aspect ratio menjadi 1. Kita menggunakan properti aspect dan perlu mengatur properti manual ke true untuk mencegah r3f menghitung aspect ratio secara otomatis: