3Dグラフィックスでは、シーンで何が起こっているのかを理解するのが難しい場合があります。3Dの世界を2Dの画面で見ていることを忘れないでください。

カメラやオブジェクトの異なる設定に基づいて、シーンはさまざまな方法でレンダリングされる可能性があります。

シーンのデバッグを助けるために、threejs と r3f はいくつかのツールを提供しています。

ヘルパー

ヘルパーは、非表示のオプションを視覚化するのに役立つコンポーネントです。

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

The boxHelperは、オブジェクトの周りにボックスを表示します。