문제

Three JS에서는 camera 위치에 따라 최종 화면이 결정 됩니다.

위 화면은 카메라의 위치를 (0, 0, 5)로 설정한 것 입니다. 대상 물체의 위치는 모두 (0, 0, 0)으로 설정하였습니다. 따라서, perspective camera 설정에 따라 대상 물체를 정면에서 바라보는 모습을 확인할 수 있습니다.

대상 물체를 조금더 왼쪽에 위치하게 하기 위해서 카메라를 오른쪽으로 움직여 봤습니다. 이 경우 perspective 속성에 의해 물체의 정면이 아닌 옆면이 보입니다. 물체의 정면을 유지하면서 왼쪽으로 이동하려하면 카메라 이동보다는 다른 방법을 고민해야 합니다.

해결: setViewOffset

Perspective 카메라의 viewport를 조정하면 원하는 결과를 얻을 수 있습니다.

camera.setViewOffset(100, 100, 20, 0, 100, 100);

참조: setViewOffset