OrbitControls - target, maxPolarAngle

OrbitControls의 target과 maxPolarAngle은 Three.js와 **react-three/drei**에서 거의 동일한 방식으로 사용됩니다. react-three/drei는 Three.js의 기능을 React 컴포넌트로 감싸서 제공하는 라이브러리이기 때문에, props의 동작은 기본적으로 Three.js의 OrbitControls와 일치합니다.

target

 

• OrbitControls의 target은 카메라가 초점을 맞출 지점을 설정합니다.
• 카메라는 target으로 지정된 위치를 중심으로 궤도를 돌며 회전합니다.

 

maxPolarAngle

 

• 카메라의 수직(위아래) 회전 범위를 제한합니다.
• maxPolarAngle는 카메라의 최대 극각을 라디안 값으로 설정하며, 수직 축을 기준으로 위쪽으로 올라갈 수 있는 최대 각도를 결정합니다.

Three.js의 OrbitControls

Three.js에서는 OrbitControls가 THREE.OrbitControls 클래스로 제공되며, target과 maxPolarAngle은 다음과 같이 사용됩니다.

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1, 0); // 카메라 초점 설정
controls.maxPolarAngle = Math.PI / 2; // 카메라 수직 회전 제한
controls.update(); // 변경 사항 적용

• target.set(x, y, z): 카메라의 회전 중심을 설정. 디폴트는 0, 0, 0 입니다.
• maxPolarAngle: 카메라가 위쪽으로 회전할 수 있는 최대 각도를 제한.
• update()를 호출해야 target 변경 사항이 반영됩니다.

react-three/drei의 OrbitControls

react-three/drei의 OrbitControls는 @react-three/fiber와 함께 사용되는 React 컴포넌트입니다. Three.js와 달리 props로 설정을 전달하며, React 컴포넌트의 특성상 상태 관리와 리렌더링을 쉽게 할 수 있습니다.

<OrbitControls target={[0, 1, 0]} maxPolarAngle={Math.PI / 2} />

• target={[x, y, z]}: 카메라가 회전할 중심을 설정.
• maxPolarAngle={value}: 카메라의 수직 회전 제한을 라디안 값으로 설정.
• React에서는 update() 호출이 필요 없고, props가 자동으로 반영됩니다.