[THREE] three.js의 camera와 contols 알아보기!

three.js

 

camera

아래의 사진처럼 camera는 scene에 담긴 3d 공간을 비추어 랜더러에게 넘겨주는 역할을 합니다.

카메라는 시야각(fov), 시작(near) / 끝(far) 지점 등을 조절할 수 있습니다.

 

기본구조

camera

 

camera 기본개념

 

camera 구성요소

 

fov (field of view)

• 시야각 이라고 합니다.
• 시야각이 커질 수록 카메라가 담는 화면의 영역이 넓어집니다.
• Three.js에서 다루는 각도들과는 다르게 radian이 아닌 일반적인 각도를 씁니다.

aspect

• fixel ratio → 화면의 가로세로 비율

near / far

• 카메라의 시야의 가장 먼 곳(far)과 가장 가까운 곳(near)을 뜻합니다.
• far는 near보다 항상 커야합니다.

 

camera의 종류

카메라의 종류에는 perspective, orthographic, cube 등이 있는데

대표적으로 많이 쓰이는 카메라는 perspective, orthographic이 있습니다.

perspectiveCamera

• 절두체를 만드는 카메라 입니다.
• 가장 많이 쓰이고 기본적인 카메라 라고 할수 있습니다.

// perspectiveCamera를 생성
// PerspectiveCamera(fov, aspect, near, far)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// renderer에 카메라 추가
renderer.render(scene, camera);

 

orthographicCamera

• 주로 2d 요소를 표현하기 위해 사용합니다.
• 게임 엔진의 에디터 등에서 처럼 3d 모델링 결과물의 상, 하, 좌, 우, 앞, 뒤를 랜더링 할 때도 사용합니다. left, right, top, bottom, near, far 로 육면체를 정의해 사용합니다.

// prespectiveCamera를 생성
// OrthographicCamera(left, right, top, bottom, near, far)
const camera = new OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

// renderer에 카메라 추가
renderer.render(scene, camera);

 

cameraControls

THREE 모듈과는 별도로 /examples/jsm/controls/{control이름}Controls.js 에서 import 하여 사용합니다.

orbitControls

카메라가 특정 대상을 중심으로 공전가능하도록 합니다.

• 타겟을 설정하면 그 타겟을 중심으로 카메라가 공전할 수 있게 됩니다.
• 가장 많이 쓰이고 기본적인 컨트롤이라고 볼수 있습니다.

// orbitControl을 선언합니다.
const controls = new orbitControls(camera, renderer.domElement)

// control을 업데이트 합니다.
controls.update()

 

flyControls

• 키보드의 w, a, s, d, q, e, r, f 로 카메라 시점 이동이 가능합니다.
• 키 입력이 없는 경우 마우스 포인터의 위치에 따라 시점이 서서히 이동합니다.

// FlyControl을 선언합니다.
const controls = new FlyControls(camera, renderer.domElement);

// control을 delta초에 따라 업데이트 합니다.
controls.update(delta);

 

pointerLockControls

• 다른 컨트롤들과 다르게 Update가 아닌 controls.lock() 메소드를 이용합니다.
• 유저의 액션이 없으면 활용 할 수 없습니다.
• controls.lock() 과 controls.unlock() 을 이용하여 이벤트를 사용 할 수 있습니다.
• pointerLockControls의 확장으로 firstPersonControls이 있습니다.

//PointerLockControls를 선언합니다.
const controls = new PointerLockControls(camera, renderer.domElement);

// lock과 unlock 시점을 이용하여 이벤트를 부여할수도 있다.
controls.addEventListener('lock', () => {
		console.log('lock')
})
controls.addEventListener('unlock', () => {
     console.log('unlock')
})

 

dragControls

• 인자로 받은 요소에 대한 드래그 기능을 활성화 시킬 수 있습니다.
• 다른 컨트롤들과 다르게 인자로 mesh, camera, renderer을 받습니다.

// DragColtrols를 선언합니다. (meshes는 사전에 선언한 mesh들의 배열입니다.)
const controls = new DragControls(meshes, camera, renderer.domElement)

// 드래그 이벤트를 추가해줍니다.
controls.addEventListener('dragstart', (e) => {
    console.log(e)
})

사진 및 자료 출처

• https://designbase.co.kr/threejs-03/ (기본 뼈대 이해하기 Renderer, Scene, Camera - Three.js 강좌)
• https://velog.io/@outclassstudio/Three.js-7-Camera (Three.js (7) Camera)