OrbitControls

이전 글에서 배웠다. 마우스로 회전 줌/아웃이 가능한 컨트롤이다.

움직임을 매끄럽게 하고 싶다면?
control.enableDamping=true;로 설정해줘야함.
또한, 이후 draw함수에서 controls.update(); 를 써줘야한다!

controls의 속성값에 따라 다양하게 카메라를 제어할 수 있다.

• enableZoom
  디폴트 값은 true. false로 되면 줌이 불가능함
• maxDistance / minDistance
  줌의 최소/최대 거리 설정
• minPolarAngle / maxPolarAngle
  회전각의 최대/최소 설정
• target.set
  회전의 중심점 설정
• autoRotate / autoRotateSpeed
  자동 회전 관련 설정

TrackballControls

Orbit controls과 비슷한데, 수직방향의 360도 회전이 가능하다.
단, controls.update()를 필수적으로 써야한다.
또한, enableDamping이 자동적으로 적용 되어있다.

FlyControls

게임에서 많이 쓴다. 키보드로 카메라의 상하좌우/회전각을 조종한다.
또한, 마우스 위치에 따라 카메라 회전이 된다.
단, controls.update(delta)를 넣어야한다.

const clock = new THREE.Clock();

function draw(){
	const delta = clock.getDelta();
  	controls.update(delta);
  	renderer.render(scene,camera);
  	renderer.setAnimationLoop(draw);
}

키보드로 카메라 이동시의 속도는 controls.rollSpeed를 이용한다.(기본값 1)
마우스 커서로 회전을 조절하지 않고, 드래그로 조절하려면 dragToLook을 true로 설정하자.

FirstPersonControls

PointerLockControls

DragControls