본문 바로가기

개발/WebGL | Canvas

[three.js] camera

THREE.PerspectiveCamera(fov, aspect, near, far, zoom)

var camera = new THREE.PerspectiveCamera(45, 
             window.innerWith/window.innerHeight, 0.1, 1000);



fov 

field of view. 카메라의 시야각을 의미한다. 카메라의 위치에 따라 보여지는 장면이다. 좋은 기본값은 50 (게임은60-90 사이) 

 aspect

 렌더링할 화면의 종횡비.

 far

 카메라에서 볼 수 있는 거리 정의. 이 값을 너무 작게 설정하면 장면의 일부가 렌더링되지 않을 것이고, 너무 크게하면 렌더링 성능에 영향을 미칠 수 있다. 좋은 기본 값은 1000

 zoom

 장면을 줌인/줌아웃할 수 있도록 해준다. 1보다 작으면 줌아웃, 1보다 크면 줌인. 음수면 장면이 거꾸로 뒤집혀 렌더링 된다.





특정 지점을 바라보기


일반적으로 카메라는 장면의 중앙인 position(0,0,0)을 가리킨다. 

아래 코드로 지점을 쉽게 변경할 수 있다.

camera.lookAt(new THREE.Vector3(x,y,z);



-three.js로 3D 그래픽 만들기 챕터2


'개발 > WebGL | Canvas' 카테고리의 다른 글

[threejs] material  (0) 2016.08.14
[three.js] light  (0) 2016.08.14
[three.js] scene, camera, renderer  (0) 2016.08.12
[WebGL] WebGL 개발 입문  (0) 2016.08.04
[WebGL] graphic API  (0) 2016.08.02