Drei menyediakan serangkaian kontrol yang berguna untuk menjelajahi adegan Anda dan berinteraksi dengan objek. Mari kita jelajahi kontrol-kontrol tersebut.

Orbit Controls

Kami sudah menggunakan komponen OrbitControls pada pelajaran sebelumnya untuk menjelajahi adegan kami.

Meskipun kami menggunakannya tanpa props, komponen ini menyediakan opsi yang bermanfaat untuk menyesuaikan perilakunya.

Pertama, Anda dapat memutuskan untuk mengaktifkan atau menonaktifkan fitur-fitur berikut melalui boolean props:

• enableZoom
• enableRotate
• enablePan

Misalnya, jika pengalaman Anda berbasis scroll, Anda dapat menonaktifkan zoom untuk mencegah konflik saat pengguna menggunakan roda mouse.

Kemudian, Anda dapat mengubah kecepatan kontrol dengan:

• zoomSpeed
• rotateSpeed
• panSpeed

Terakhir, Anda dapat mengubah nilai minimum dan maksimum untuk zoom:

• minZoom
• maxZoom

...rotasi atas dan bawah:

• minPolarAngle
• maxPolarAngle

...rotasi kiri dan kanan:

• minAzimuthAngle
• maxAzimuthAngle

...dan pan dengan:

• minDistance
• maxDistance

Jika Anda menjalankan proyek starter, Anda dapat melihat bahwa kami dapat mencapai posisi-posisi yang terlihat bermasalah. (di bawah tanah, melalui mesh, pan agar tidak menunjukkan mercusuar, dll.)

Mari kita gabungkan beberapa props ini untuk menciptakan pengalaman yang lebih terbatasi:

Copy
<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

Lihat bagaimana kamera kini dibatasi untuk selalu menampilkan mercusuar dengan cara yang menarik. Ini mencegah pengguna melihat melalui objek dan di bawah tanah.

Detail-detail kecil ini dapat membuat perbedaan besar dalam kualitas pengalaman Anda.

Karena komponen drei hanya merupakan pembungkus di sekitar kelas OrbitControls dari three.js cek dokumentasi three.js untuk melihat semua props yang tersedia.

Kontrol Presentasi

PresentationControls berbeda dengan OrbitControls karena berinteraksi dengan konten objek dalam wrapper, bukan kameranya. Selain itu, keduanya sangat mirip.

Berikut adalah contoh kode dari dokumentasi drei