In 3D graphics, it can be difficult to understand what is happening in the scene. Remember, we see a 3D world on a 2D screen.

Based on the different settings on the camera and objects, the scene can be rendered in different ways.

To help us debug our scenes, threejs and r3f provides us with a few tools.

Helpers

Helpers are components that help us visualize non-visible options.

AxesHelper

The axesHelper displays the X, Y and Z axes in the scene.

It can be very useful once you start moving and rotating the camera and objects.

It comes from the three package, so we can instiantiate it like this:

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

We now have a visual representation of the axes in our scene:

GridHelper

The gridHelper displays a grid in the scene.

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

We now have a grid in our scene.

As any other 3D object, we can move, scale and rotate it

Grid

R3F also provides its own grid component.

It provides more options than the gridHelper like the ability to add a fade effect and choose the size of the sections and cells.

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

We now have a fading grid in our scene:

BoxHelper

The boxHelper displays a box around an object.