아카이브

[Three] 03. Camera 본문

Frontend

[Three] 03. Camera

Rayi 2025. 5. 10. 17:21

Camera는 Scene의 모습을 사용자에게 어떤 위치와 어떤 각도로 보여줄 것인지 결정합니다.

 

일반적으로 Camera( ) 객체 자체로 선언하지 않고 이를 상속받은 하위 camera 객체들로 선언합니다.

PerspectiveCamera( )

원근감에 의한 투시가 적용되어, 사람이 보는 눈과 동일한 시야를 제공하는 카메라입니다.

import * as THREE from 'three';

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

fov | 화각. 증가할수록 카메라에 담기는 영역이 많아집니다.

aspect | 가로/세로 비율입니다. 일반적으로 화면의 비율과 맞추기 위해 window.innerWidth / window.innerHeight로 설정합니다.

near | 카메라에 담길 가장 가까운 거리. 이보다 가까이에 있는 물체는 카메라에 담기지 않습니다.

far | 카메라에 담길 가장 먼 거리. 이보다 멀리 있는 물체는 카메라에 담기지 않습니다.

OrthographicCamera( )

원근감에 의한 투시가 적용되지 않고 대상의 위치를 카메라에 그대로 사영하여 나타냅니다.

import * as THREE from 'three';

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

left, right, top, bottom | 각각 가장자리에 위치할 좌표의 값을 나타냅니다. 화면 정중앙을 (0, 0)으로 합니다.

near | 카메라에 담길 가장 가까운 거리. 이보다 가까이에 있는 물체는 카메라에 담기지 않습니다.

far | 카메라에 담길 가장 먼 거리. 이보다 멀리 있는 물체는 카메라에 담기지 않습니다.

728x90

'Frontend' 카테고리의 다른 글

[Three] 05. Light  (0) 2025.05.11
[Three] 04. Renderer  (0) 2025.05.11
[Three] 02. Scene  (0) 2025.05.10
[Three] 01. Three.js 기본 구성 요소 - Renderer, Scene, Camera  (0) 2025.05.04
[Frontend] Zustand에 대해서  (0) 2025.04.14
Comments