[ #4 ] ThreeJS의 Camera

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

ThreeJS에서 제공하는 다양한 Camera 클래스에 대해 알아보자!

👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용

[ #1 ] ThreeJS의 기본 틀

 

 

 

🍀 Camera

[ 📷 PerspectiveCamera ]

가장 많이 사용하는 카메라 중 하나!
원근감의 1인칭 뷰를 구성할 때 많이 사용하게 됩니다요!

• 특징
  • 원근법을 사용하여 3D 공간을 표현
• 용도
  • 현실감 있는 시각적 표현이 필요한 경우에 사용됨
• 인자 요소
  • fov(Field Of View) :  카메라의 수직 시야각, 단위는 degree
  • aspect :  화면의 가로 세로 비율
  • near :  카메라부터의 최소 거리 (이 값보다 가까운 객체는 렌더링되지 않음)
  • far :  카메라부터의 최대 거리 (이 값보다 먼 객체는 렌더링되지 않음)

const camera = new THREE.PerspectiveCamera(
	75, // fov
    window.innerWidth / window.innerHeight, // aspect
    0.1, // near
    1000 // far
);
// 위 값은 평균적으로 많이 사용하는 설정입니다

 

[ 📷 OrthographicCamera ]

이 카메라는 2D의 뷰를 구성하고 싶을 때 많이 사용합니다요

• 특징
  • 직교 투영을 사용하여 3D 공간을 표현
  • 원근 효과가 없음
• 용도
  • 객체 간의 상대적인 크기를 유지하는 경우에 사용됨
• 인자 요소
  • left, right, top, bottom :  카메라의 투영 면 경계 설정 (카메라 뷰 중심부터 얼만큼 떨어진 곳까지 투영할 건지)
  • near, far :  카메라로부터의 최소 및 최대 거리 (이외 범주의 객체는 렌더링하지 않음)

const camera = new THREE.OrthographicCamera(
	-window.innerWidth / 2, // left
    window.innerWidth / 2, // right
    window.innerHeight / 2, // top
    -window.innerHeight / 2, // bottom
    0.1, // near
    1000 // far
);
// 위 값은 평균적으로 많이 사용하는 설정입니다

똑같은 크기의 Cube를 앞 뒤로 배치했을때,

Orthogaphic Camera는 원근 효과가 없기 때문에, 앞 뒤 큐브 모두 동일한 크기로 렌더링됩니다!
반면에, Perspective Camera는 원근법의 적용으로, 뒤의 큐브가 앞의 큐브보다 작게 렌더링됩니다!

 

[ 📷 CubeCamera ]

보통 우리는 주로 사용하지 않지만,
ThreeJS는 주변 환경의 맵을 만들기 위해 사용하고 있습니다요

• 특징
  • 6개의 방향으로 뷰를 생성하여 주변의 큐브 맵 텍스처를 생성함
• 용도
  • 환경 매핑, 반사, 그림자 텍스처 생성 등에 사용됨
• 인자 요소
  • near, far :  카메라로부터의 최소 및 최대 거리 (이외 범주의 객체는 렌더링하지 않음)
  • resolution :  큐브 맵 텍스처의 해상도 (256 설정 시, 각 큐브 맵 면이 256 X 256 픽셀의 해상도를 가짐)

const camera = new THREE.CubeCamera(
	1, // near
    1000, // far
    256 // resolution
);

 

[ 📷 ArrayCamera ]

여러 개의 카메라를 관리하고 한 번에 모든 카메라의 뷰를 보여줄 수 있는 카메라!
보통 멀티뷰를 구현하기 위해 사용합니다요

• 특징
  • 여러 개의 카메라를 배열로 관리하며, 각각의 카메라를 독립적으로 설정할 수 있음
• 용도
  • 다양한 시점에서 동시에 렌더링이 필요한 경우 사용됨
• 인자 요소
  • array :  ThreeJS의 카메라 클래스를 item으로 갖는 배열

const cameras = [
  new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
  new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
];
const arrayCamera = new THREE.ArrayCamera(cameras);

 

[ 📷 StereoCamera ]

진짜 눈으로 보는 것처럼 구현하기 위해 두개의 카메라를 사용한다고 합니당

• 특징
  • 입체 시각을 제공하기 위해 두 개의 카메라를 사용하여 스테레오 뷰를 생성함 
• 용도
  • VR, 3D 영상 등에서 사용됨
• 인자 요소
  • eyeSep :  두 카메라 간의 간격
  • cameraL, cameraR :  왼쪽 및 오른쪽 카메라

const camera = new THREE.StereoCamera();
camera.eyeSep = 0.064;  // eyeSep (64mm가 사람의 평균 안구 간 거리)