[Three] 03. Camera

2025. 5. 10. 17:21·Frontend

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
'Frontend' 카테고리의 다른 글
  • [Three] 05. Light
  • [Three] 04. Renderer
  • [Three] 02. Scene
  • [Three] 01. Three.js 기본 구성 요소 - Renderer, Scene, Camera
Rayi
Rayi
  • Rayi
    아카이브
    Rayi
  • 전체
    오늘
    어제
    • 분류 전체보기 (276)
      • CS (40)
        • CV (2)
        • PS (34)
      • Reveiw (18)
        • Paper (18)
        • Github (0)
      • ML (8)
        • Pytorch (5)
      • Language (59)
        • Python (8)
        • JavaScript (32)
        • TypeScript (16)
        • C++ (3)
      • IDE (12)
      • Git (13)
      • Frontend (77)
        • React (8)
        • ReactNative (6)
        • SolidJS (20)
        • CSS (12)
      • Backend (44)
        • DB (18)
        • Node.js (11)
      • UI (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    ts
    PyTorch
    CV
    ps
    deploy
    CSS
    ReactNative
    Express
    frontend
    mongo
    PRISMA
    python
    CS
    react
    postgresql
    backend
    Three
    SOLID
    nodejs
    figma
    modal
    API
    GAN
    DB
    expo
    review
    ML
    Git
    vscode
    js
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
Rayi
[Three] 03. Camera
상단으로

티스토리툴바