Dalam grafik 3D, bisa sulit untuk memahami apa yang terjadi dalam scene. Ingat, kita melihat dunia 3D pada layar 2D.

Berdasarkan pengaturan yang berbeda pada kamera dan objek, scene dapat dirender dengan cara yang berbeda.

Untuk membantu kita mendebug scene kita, threejs dan r3f menyediakan beberapa alat untuk kita.

Helpers

Helpers adalah komponen yang membantu kita memvisualisasikan opsi yang tidak terlihat.

AxesHelper

axesHelper menampilkan sumbu X, Y dan Z dalam scene.

Ini bisa sangat berguna setelah Anda mulai menggerakkan dan memutar kamera dan objek.

Ini berasal dari paket three, jadi kita bisa menginstansiasinya seperti ini:

Copy
<Canvas>
  <axesHelper />
  {/* ... */}

Sekarang kita memiliki representasi visual dari sumbu dalam scene kita:

GridHelper

gridHelper menampilkan grid dalam scene.

Copy
<gridHelper args={[10, 10, "green", "blue"]} />

Sekarang kita memiliki grid dalam scene kita.

Seperti objek 3D lainnya, kita dapat memindahkan, menskalakan, dan memutarnya

Grid

R3F juga menyediakan komponen grid miliknya sendiri.

Komponen ini menyediakan lebih banyak opsi daripada gridHelper seperti kemampuan untuk menambahkan efek pudar dan memilih ukuran dari bagian dan sel.

Copy
<Grid
  sectionSize={3}
  sectionColor={"purple"}
  sectionThickness={1}
  cellSize={1}
  cellColor={"#6f6f6f"}
  cellThickness={0.6}
  infiniteGrid
  fadeDistance={50}
  fadeStrength={5}
/>

Sekarang kita memiliki grid dengan efek pudar dalam scene kita:

BoxHelper

The boxHelper menampilkan kotak di sekitar objek.