자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌

안녕하세요. 이번 시간에는 화면을 마우스로 회전하고, 줌인 줌아웃을 할 수 있도록 만들어볼게요. 복잡한 코드 필요 없이 three.js에서 제공하는 orbitControls를 추가 설치 후 코드 몇 줄만 적어주면 끝납니다.

관련 문서 : https://threejs.org/docs/#examples/en/controls/OrbitControls

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

OrbitControls 사용 방법

import로 불러오기

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

02. OrbitControls 추가하기

// OrbitControls 추가
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 2;
controls.maxDistance = 4;
controls.maxPolarAngle = Math.PI / 2;
controls.update();

03. 업데이트

마지막으로 animate 함수 안에 넣어서 업데이트 해주면 됩니다. 이제 화면 속 3D 공간을 마우스로 자유롭게 움직일 수 있습니다. 클릭 & 드래그를 하면 화면을 회전시킬 수 있고, 마우스 휠을 움직이면 줌인 줌아웃이 가능합니다.

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate()