En gráficos 3D, puede ser difícil entender lo que está sucediendo en la escena. Recuerda, vemos un mundo 3D en una pantalla 2D.

Basado en los diferentes ajustes de la cámara y los objetos, la escena puede renderizarse de diferentes maneras.

Para ayudarnos a depurar nuestras escenas, threejs y r3f nos proporcionan algunas herramientas.

Helpers

Helpers son componentes que nos ayudan a visualizar opciones no visibles.

AxesHelper

El axesHelper muestra los ejes X, Y y Z en la escena.

Puede ser muy útil una vez que empiezas a mover y rotar la cámara y los objetos.

Proviene del paquete three, así que podemos instanciarlo de esta manera:

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

Ahora tenemos una representación visual de los ejes en nuestra escena:

GridHelper

El gridHelper muestra una rejilla en la escena.

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

Ahora tenemos una rejilla en nuestra escena.

Como cualquier otro objeto 3D, podemos moverlo, escalarlo y rotarlo.

Grid

R3F también proporciona su propio componente grid.

Proporciona más opciones que el gridHelper, como la capacidad de agregar un efecto de desvanecimiento y elegir el tamaño de las secciones y celdas.

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

Ahora tenemos una rejilla que se desvanece en nuestra escena:

BoxHelper

El boxHelper muestra una caja alrededor de un objeto.