three.js 카메라 컨트롤 - OrbitControls

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 Scence(씬, 장면)의 중앙을 기준으로 카메라의 초점(position)에서 수직(상/하), 수평(좌/우)으로 회전하고 확대/축소를 할 수 있습니다. 그리고 카메라의 초점(position)도 이동할 수 있습니다.

 

1. import를 통해 OrbitControls(오빗 컨트롤, 궤도 컨트롤) 모듈을 가져옵니다.

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

 

OrbitControls 모듈의 위치는 node_modules에서 three의 package.json 파일을 보면 "./examples/jsm/*"이 "./addons/*"으로도 exports 된 것을 확인할 수 있습니다.

"exports": {
  ".": {
    "import": "./build/three.module.js",
    "require": "./build/three.cjs"
  },
  "./examples/fonts/*": "./examples/fonts/*",
  "./examples/jsm/*": "./examples/jsm/*",
  "./addons/*": "./examples/jsm/*",
  "./src/*": "./src/*",
  "./nodes": "./examples/jsm/nodes/Nodes.js"
}

 

즉, OrbitControls 모듈의 실제 위치는 "\node_modules\three\examples\jsm\controls\OrbitControls.js" 입니다.

 

2. OrbitControls(오빗 컨트롤, 궤도 컨트롤)을 생성합니다.

OrbitControls(object : Camera, domElement : HTMLDOMElement)

• object(객체) : 제어할 카메라 객체입니다.
• domElement(돔 엘리먼트): 랜더러가 렌더링 한 결과의 HTML 엘리먼트입니다.

 

카메라 객체와 랜더러가 렌더링 한 결과의 HTML 엘리먼트를 사용하여 OrbitControls을 생성합니다.

// 컨트롤 생성
const controls = new OrbitControls(camera, renderer.domElement);

 

3. OrbitControls(오빗 컨트롤, 궤도 컨트롤)을 업데이트합니다. OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 렌더링 전에 실행되어야 합니다.

// 애니메이팅
function animate() {
    box1.rotation.x += 0.01;
    box1.rotation.y += 0.01;
    box1.rotation.z += 0.01;
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

 

 

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 마우스와 터치로 컨트롤됩니다.

• Orbit(오빗, 궤도, 회전)은 마우스 왼쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점을 중심으로 회전하게 됩니다.  터치는 한 손가락으로 화면을 터치한 후 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점을 중심으로 회전하게 됩니다.
• Zoom(줌, 확대/축소)은 마우스의 스크롤 휠을 위로 스크롤하면 카메라 초점을 중심으로 확대되고 스크롤 휠을 아래로 스크롤하면 카메라 초점을 중심으로 축소가 됩니다. 터치는 두 손가락으로 화면을 터치한 후 손가락 사이를 펼치면 초점을 중심으로 확대되고 손가락 사이를 붙이면 카메라 초점을 중심으로 축소가 됩니다.
•  Pan(팬)은 마우스 오른쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다. 또는 키보드의 Ctrl이나 Shift를 누른 상태에서 마우스 왼쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다. 터치는 두 손가락으로 화면을 터치한 후 두 손가락을 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다.

 

마우스 왼쪽 버튼을 클릭하고 왼쪽으로 이동하면 카메라가 Y축 중심으로 시계 방향으로 회전합니다.

 

마우스 왼쪽 버튼을 클릭하고 오른쪽으로 이동하면 카메라가 Y축 중심으로 시계 반대 방향으로 회전합니다.

 

마우스 왼쪽 버튼을 클릭하고 위쪽으로 이동하면 카메라가 X축 중심으로 위로 회전합니다.

 

마우스 왼쪽 버튼을 클릭하고 아래쪽으로 이동하면 카메라가 X축 중심으로 아래로 회전합니다.

 

마우스의 스크롤 휠을 위로 스크롤하면 확대가 됩니다.

 

마우스의 스크롤 휠을 아래로 스크롤하면 축소가 됩니다.

 

마우스 오른쪽 버튼을 클릭하고 왼쪽으로 이동하면 카메라의 X 위치가 오른쪽으로 이동됩니다.

 

마우스 오른쪽 버튼을 클릭하고 오른쪽으로 이동하면 카메라의 X 위치가 왼쪽으로 이동됩니다.