3. 카메라 컨트롤

카메라 컨트롤이란?

three.js 에서는 카메라를 컨트롤 하기 쉽도록 몇 가지의 클래스를 제공한다.

특수한 기능을 가진 카메라가 필요하지 않은 경우에는 three.js 가 제공하는 컨트롤러를 사용하도록 하자!

1. OrbitControls

가장 유용하다고 생각하는 컨트롤러 이다! 다른 건 몰라도 이건 꼭 알아야 한다고 생각한다

기본 적인 기능으로 마우스를 클릭하고 드래그 할 때, 카메라가 회전하고 스크롤로 줌인 줌아웃이 가능하다. 쉬프트를 누그로 드래그 할 때 에는 카메라의 위치를 조정할 수 있다!

주의 할 점은 카메라의 회전각의 최댓값이 정해져 있기 때문에 무한하게 회전하지는 못한다. 계속 회전 하고 싶을 때는 TrackballControls 을 사용해야한다!

2. TrackballControls

이건 OrbitControls 랑 거의 비슷한데, 회전에 제한이 없고 계속 공처럼 회전가능해서 트랙볼 이라고 부르는 것 같다

3. PointerLockControls

아주 매력적인 컨트롤러 이다!

1인칭시점으로 카메라를 컨트롤 한다. (ex 마인크래프트, 서든어택)

기본적으로 화면을 클릭하면 lock 상태로 진입하고 마우스를 움직이면 카메라가 마우스의 방향을 본다! 단, lock 상태로 진입하는 코드를 직접 작성 해 주어야 한다!!

//컨트롤러 추가
import {PointerLockControls} from 'three/examples/jsm/controls/PointerLockControls'

const controls=new PointerLockControls(camera, renderer.domElement)

// 클릭시 lock 이벤트 발생
document.addEventListener("click",()=>controls.lock())

예시의 코드는 아무 곳이나 클릭하면 lock 상태로 진입하도록 하였다

4. DragControls

DragControls 는 다른 컨트롤러들과는 조금 차이점이 있다. 카메라를 조종하지 않고, 첫 매개변수로 받은 objects 들을 드래그 앤 드롭 가능하게 만든다

//컨트롤러 추가
import {DragControls} from 'three/examples/jsm/controls/DragControls'

//컨트롤 하고 싶은 objects 를 첫 매개변수로 넣는다
const controls=new DragControls(objects,camera, renderer.domElement)

---

많이 사용하는 4가지의 컨트롤러 들을 알아 봤다!