three.js Camera - Orthographic

https://threejs.org/docs/index.html?q=camera#api/en/cameras/OrthographicCamera 

three.js docs

이번에는 거리에 영향을 받지 않는 orthographic 카메라를 알아보자.

docs의 생성자를 보면

frustum의 구성요소들을 지정하는 값들이 필요하다.

const camera = new THREE.OrthographicCamera(
    -(window.innerWidth / window.innerHeight),
    window.innerWidth / window.innerHeight,
    1,
    -1,
    0.1,
    1000
);

camera를 생성하고 보이지 않는 경우 position을 확인하자.

 

camera의 기능들을 잠깐 알아보자.

camera.lookAt(0, 0, 0);
camera.zoom = 0.5;
camera.updateProjectionMatrix();

lookAt함수를 통해 특정 position을 향할 수 있다.

zoom값을 조정하여 카메라 줌을 조정하고, updateProjectionMatrix를 통해 적용한다.