Depuración

Starter pack

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:

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

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

Axes helper

GridHelper

El gridHelper muestra una rejilla en la escena.

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

Ahora tenemos una rejilla en nuestra escena.

Grid helper

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.

<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:

Grid

BoxHelper

El boxHelper muestra una caja alrededor de un objeto.

End of lesson preview

To get access to the entire lesson, you need to purchase the course.