3D 그래픽에서는 장면에서 무슨 일이 일어나고 있는지 이해하기 어려울 수 있습니다. 우리는 2D 화면에서 3D 세계를 보기 때문입니다.

카메라와 객체의 다양한 설정에 따라 장면이 다양한 방식으로 렌더링될 수 있습니다.

장면을 디버그하는 데 도움을 주기 위해, 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

boxHelper는 객체 주위에 상자를 표시합니다.