在3D图形中，理解场景中发生的事情可能会很困难。记住，我们是在二维屏幕上查看一个三维世界。

根据相机和对象的不同设置，场景可以以不同的方式呈现。

为了帮助我们调试场景，threejs 和 r3f 为我们提供了一些工具。

Helpers

Helpers 是帮助我们可视化不可见选项的组件。

AxesHelper

axesHelper 在场景中显示 X，Y 和 Z 轴。

一旦你开始移动和旋转相机和对象，它就会非常有用。

它来自 three 包，所以我们可以这样实例化它：

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

我们现在在场景中有了轴的视觉表现：

GridHelper

gridHelper 在场景中显示一个网格。

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

我们现在在场景中有一个网格。

与其他 3D 对象一样，我们可以移动、缩放和旋转它

Grid

R3F 还提供了其自身的 grid 组件。

它提供了比 gridHelper 更多的选项，例如能够添加渐变效果并选择部分和单元格的大小。

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

我们现在在场景中有一个渐变网格：

BoxHelper

boxHelper 在对象周围显示一个框。