소개

Viewcube

가운데에 <Torus /> 컴포넌트를 배치합니다.

<Hud /> 컴포넌트를 사용하여 우상단에 Viewcube를 배치합니다.

Viewcuve 는 useThree hook으로 얻어온 viewport를 사용하여 우상단 위치를 계산하고 camera를 사용하여 Viewcube의 회전을 제어합니다.

다음과 같이 주 카메라의 matrix 값의 역행렬의 회전 속성을 적용할 수 있습니다.

// Spin mesh to the inverse of the default cameras matrix
matrix.copy(camera.matrix).invert();
mesh.current?.quaternion?.setFromRotationMatrix(matrix);

조금더 분명하게 표현하기 위해서 주 Canvas와 Hud에 <gridHelper />와 <axesHelper />를 추가합니다.

Hud 영역의 경우 <OrthographicCamera>를 사용하여 큐브의 일그러짐이 없도록 합니다.

화면에서 확인할 수 있듯, 주 Canvas의 Perspective 카메라로 바라보는 시점에 따라 Torus와 좌표계를 포함한 World의 회전이 달라집니다.

반면 우상단의 Hud 영역은 독립적인 좌표계이며 World가 아닌 Box의 회전만을 반영합니다.