직교 카메라(Orthographic Camera)

 

 

직교 카메라

 

basic/src/main.js

import * as THREE from "three";

/* Renderer 만들기 : html에 캔버스 미리 만들기 */
const canvas = document.querySelector("#three-canvas");
const renderer = new THREE.WebGLRenderer({
  canvas,
  antialias: true // 부드러운 효과
});
renderer.setSize(window.innerWidth, window.innerHeight);

/*  Scene 만들기 */
const scene = new THREE.Scene();

/*  Camera 만들기 : Perspective Camera*/
// const camera = new THREE.PerspectiveCamera(
//   75, // 시야각 (field of view)
//   window.innerWidth / window.innerHeight, // 종횡비(aspect)
//   0.1, // near
//   1000 // far
// );
// camera.position.x = 2;
// camera.position.y = 2;
// camera.position.z = 5;
// scene.add(camera);

/*  직교 카메라(Orthographic Camera) */
const camera = new THREE.OrthographicCamera(
  -(window.innerWidth / window.innerHeight), // left
  window.innerWidth / window.innerHeight, // right
  1, // top
  -1, // bottom
  0.1, // near
  1000 // far
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(0, 0, 0); // 카메라가 도형의 원점 바라보게 하기
camera.zoom = 0.5; // 기본값은 `1` 이다.
camera.updateProjectionMatrix(); // 카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함

/*  Messh 만들기 */
const geometry = new THREE.BoxGeometry(1, 1, 1); // 직육면체 모양 만들기 BoxGeometry(1m, 1m, 1m)
const material = new THREE.MeshBasicMaterial({
  // MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
  color: "red" // 재질의 색상
});
const mesh = new THREE.Mesh(geometry, material); // 재질 = geometry(모양) + Material(재질)
scene.add(mesh); // 장면에 올리기

renderer.render(scene, camera); // 그리기

 

 

 

OrthographicCamera

공식문서 바로가기

• 이 투영 모드에서는, 렌더링 된 이미지에서 객체의 크기는 카메라와의 거리에 관계없이 일정하게 유지
• 2D 장면과 UI 요소를 렌더링하는 데 유용

 

 

코드 예제

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

 

 

• left — 카메라 절두체 좌평면.
• right — 카메라 절두체 우평면.
• top — 카메라 절두체 상평면.
• bottom — 카메라 절두체 하평면.
• near — 카메라 절두체 근평면.
• far — 카메라 절두체 원평면.

 

 

절두체란?

시야에 보이는 영역을 표현한 입체이다.