[React / Three] AxisHelper / GridHelper

1. axesHelper 는 간단한 방법으로 3개의 축을 시각화하는 데 도움이 되는 객체이며 Three.js 라이브러리의 일부로 React Three Fiber 캔버스를 사용할 때 기본적으로 포함되어 있다. X축은 빨간색, Y축은 녹색, Z축은 파란색이고 팔 길이를 조절할 수 있다.

<axesHelper args={[5]} />

 

2. gridHelper는 2차원 그리드롸 바닥이 어디에 있는지 또는 다른 경계를 생성하는 경우에 유용한다. gridHelper인수를 사용하여 변경할 수도 있다. 예를 들어 빨간색 중앙선과 청록색 격자선이 있는 20x20 격자이다.

<gridHelper args={[20, 20, 0xff0000, 'teal']} />

다른 객체와 마찬가지로 회전할 수 있다.

<gridHelper rotation-x={Math.PI / 4} />

<gridHelper rotation={[Math.PI / 4, 0, 0]} />