[ Three.js ] PerspectiveCamera는 어떤 역할을 할까요?

오늘은 Three.js 에서 가장 많이 사용되는 카메라 중 하나인 PerspectiveCamera에 대해 알아보겠습니다!

Three.js를 처음 배우면 가장 먼저 보게 되는 코드 중 하나가 바로 이것입니다.

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

처음 보면 숫자도 많고, 정확히 무슨 역할을 하는지 헷갈릴 수 있습니다.
하지만 PerspectiveCamera는 사실 굉장히 중요한 개념입니다.

왜냐하면 Three.js에서 카메라는 단순히 “보는 기능”이 아니라,
3D 공간을 어떤 방식으로 화면에 투영할지 결정하는 핵심 요소이기 때문입니다.

 

PerspectiveCamera란?

---

PerspectiveCamera는 사람의 눈처럼 원근감을 표현하는 카메라입니다.

쉽게 말하면:

• 가까운 물체는 크게 보이고
• 먼 물체는 작게 보이는

우리가 현실에서 보는 방식과 동일하게 화면을 렌더링 합니다.

예를 들어:

• 자동차 게임
• FPS 게임
• 3D 웹사이트
• 메타버스
• 제품 쇼케이스

등 대부분의 3D 콘텐츠는 PerspectiveCamera를 사용합니다.

 

PerspectiveCamera 생성 방법

---

const camera = new THREE.PerspectiveCamera(
  fov,
  aspect,
  near,
  far
)

총 4개의 값을 받습니다.

 

1. fov (Field of View)

75

카메라가 얼마나 넓게 볼지를 의미합니다.

쉽게 말하면 “시야각”입니다.

• 값이 작을수록 → 줌인 느낌
• 값이 클수록 → 광각 느낌

입니다.

예시:

const camera = new THREE.PerspectiveCamera(
  30,
  aspect,
  0.1,
  1000
)

→ 망원렌즈 느낌

const camera = new THREE.PerspectiveCamera(
  100,
  aspect,
  0.1,
  1000
)

→ 액션캠 같은 광각 느낌

보통은 45 ~ 75 사이를 많이 사용합니다.

 

2. aspect (가로 세로 비율)

window.innerWidth / window.innerHeight

화면 비율을 의미합니다.

예를 들어:

• 1920x1080
• 1280x720

같은 화면 비율에 맞춰 카메라가 왜곡되지 않도록 설정하는 것입니다.

만약 aspect가 맞지 않으면:

• 화면이 찌그러지거나
• 늘어나 보이게 됩니다.

그래서 보통 resize 이벤트에서도 업데이트를 해줍니다.

camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()

 

 

3. near

0.1

카메라가 볼 수 있는 최소 거리입니다.

즉 카메라에 너무 가까운 물체는 렌더링 하지 않습니다.

예를 들어:

near = 0.1

이면 카메라 앞 0.1보다 가까운 물체는 안 보입니다.

 

4. far

1000

카메라가 볼 수 있는 최대 거리입니다.

이 거리보다 멀리 있는 물체는 렌더링 되지 않습니다.

예시:

far = 1000

→ 1000 거리 이상은 안 보임

 

near와 far가 중요한 이유

---

많은 초보자들이:

0.0001, 999999

처럼 엄청 크게 설정하는 경우가 있습니다.

하지만 이렇게 하면 Depth Buffer 정밀도가 떨어져서:

• 물체가 깜빡이거나
• 겹쳐 보이거나
• Z-Fighting 현상

이 발생할 수 있습니다.

그래서 가능한 필요한 범위만 설정하는 것이 중요합니다.

 

PerspectiveCamera는 실제로 어떻게 동작할까?

---

PerspectiveCamera는 3D 공간의 좌표를 2D 화면으로 변환합니다.

즉:

3D 세계 → 카메라 시점 → 2D 화면

으로 변환하는 역할을 합니다.

이 과정을 Projection(투영)이라고 부릅니다.

특히 PerspectiveCamera는 원근 투영(Perspective Projection)을 사용합니다.

 

원근감이 생기는 이유

---

멀리 있는 물체는 작게 보이도록 계산하기 때문입니다.

예를 들어 같은 크기의 큐브라도:

• 가까우면 크게 보이고
• 멀면 작게 보입니다.

이 계산 덕분에 현실감 있는 3D 표현이 가능합니다.

 

OrthographicCamera와의 차이점

---

Three.js 에는 또 다른 카메라인 OrthographicCamera도 존재합니다.

차이는 다음과 같습니다.

카메라특징

PerspectiveCamera	원근감 있음
OrthographicCamera	원근감 없음

OrthographicCamera는:

• CAD
• 맵 에디터
• UI
• 전략 게임

등에서 많이 사용됩니다.

멀리 있어도 크기가 변하지 않는 특징이 있습니다.

 

실제 예시

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

camera.position.z = 5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

function animate() {
  requestAnimationFrame(animate)

  renderer.render(scene, camera)
}

animate()

여기서 핵심은:

renderer.render(scene, camera)

입니다.

현재 카메라 시점 기준으로 scene을 화면에 그려주는 것이죠.

 

마치며

---

PerspectiveCamera는 Three.js에서 가장 기본적이면서도 중요한 개념 중 하나입니다.

단순히 “카메라”라고 생각하기보다:

• 3D 공간을
• 어떤 방식으로
• 2D 화면에 투영할지

결정하는 핵심 요소라고 이해하는 것이 중요합니다.

처음에는 숫자들이 어렵게 느껴질 수 있지만, 직접 값을 바꿔보면서 테스트해 보면 원리를 훨씬 빠르게 이해할 수 있습니다 😊

긴 글 읽어주셔서 감사합니다!

 

참고

• Three.js Camera Docs