[three.js journey] 3강 복습: Three.js 프로젝트 시작하기 (2)

아래는 three.js를 사용하여 간단한 빨간 박스를 생성하고 화면에 렌더링하여 볼 수 있는 코드이다.

// script.js

import * as THREE from "three";

const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

// Sizes
const sizes = {
  width: 800,
  height: 600,
};

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3;
scene.add(camera);

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);

위 코드로 랜더링된 브라우저 화면.

코드를 하나씩 살펴보자.

---

Three.js 임포트

import * as THREE from "three";

Three.js 라이브러리를 불러온다.

캔버스 선택

const canvas = document.querySelector("canvas.webgl");

 

HTML에서 <canvas class="webgl"></canvas> 요소를 선택하여 3D 장면을 렌더링할 캔버스를 지정한다.

Scene 생성

const scene = new THREE.Scene();

• Three.js에서 장면(scene)을 생성한다. 이 장면에 객체, 카메라, 조명 등을 추가할 수 있다.
• Scene은 3D 그래픽을 구성하고 렌더링하는 데 필요한 모든 객체를 포함하는 컨테이너이다. 쉽게 말해서, Scene은 3D 월드를 담고 있는 공간이다. 

객체 생성

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

1. geometry는 1x1x1 크기의 정육면체를 정의한다.
2. material은 빨간색 기본 재질(material)을 정의한다.
3. mesh는 앞서 정의한 지오메트리와 재질을 결합한 메쉬(mesh) 객체다.

scene.add(mesh);

이 메쉬 객체를 씬에 추가한다.

캔버스 크기 설정

const sizes = {
  width: 800,
  height: 600,
};

캔버스의 width와 height로 사용할 크기를 설정한다.

카메라 생성

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3;
scene.add(camera);

1. camera를 원근 투영 카메라(perspective camera)로 설정했다.
   • 첫 번째 인자는 시야각(FOV, field of view)
   • 두 번째 인자는 종횡비(aspect ratio)
2. 카메라의 z축 위치를 3으로 설정한다.
   • 카메라가 객체 내부에 있으면 화면에 보이지 않는다.
   • 그 이유는 three.js가 성능을 향상시키기 위해 Backface Culling이라는 기술을 사용하기 때문이다. 이는 카메라를 향하고 있지 않은 (즉, 뒤를 향한) 폴리곤을 렌더링하지 않는 것을 의미한다.
3. 카메라를 Scene에 추가한다.

카메라를 설정할 때 중요한 두 가지 개념

시야각 (Field of View, FOV)

시야각은 카메라가 한 번에 볼 수 있는 장면의 범위를 말한다. 쉽게 말해 카메라의 렌즈가 얼마나 넓게 또는 좁게 보이는지를 결정한다.

• 넓은 시야각: 더 많은 장면을 볼 수 있다. 값이 크면(예: 90도) 카메라가 넓은 영역을 포착한다. 이는 마치 광각 렌즈를 사용하는 것과 비슷하다.
• 좁은 시야각: 더 적은 장면을 볼 수 있다. 값이 작으면(예: 30도) 카메라가 좁은 영역을 포착한다. 이는 마치 줌 렌즈를 사용하는 것과 비슷하다.

예를 들어, 시야각이 75도로 설정된 카메라는 카메라 앞의 75도 범위를 볼 수 있게 된다.

 

 

종횡비 (Aspect Ratio)

종횡비는 카메라가 장면을 볼 때의 가로 대 세로 비율이다. 이 비율은 장면이 화면에 얼마나 왜곡되지 않고 나타나는지를 결정한다.

• 정사각형 화면: 종횡비가 1:1이다. 예를 들어, 800x800 픽셀 화면이다.
• 와이드스크린 화면: 종횡비가 16:9다. 예를 들어, 1920x1080 픽셀 화면이다.
• 세로로 긴 화면: 종횡비가 9:16이다. 예를 들어, 1080x1920 픽셀 화면이다.

종횡비는 일반적으로 화면의 가로 길이를 세로 길이로 나눈 값이다. 예를 들어, 브라우저 창이 800x600 픽셀이라면 종횡비는 800/600 = 1.33이다.

Renderer 생성

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);

1. renderer는 WebGLRenderer로, Three.js를 사용하여 장면을 렌더링하는 데 사용된다. 생성 시에 사용할 캔버스를 지정한다.
2. renderer.setSize를 사용하여 렌더러의 크기를 설정한다.
3. renderer.render(scene, camera)를 사용하여 장면(scene)을 카메라(camera)의 시점에서 렌더링한다.

---

[참고 자료]

Scene이란? 디자인베이스 (https://designbase.co.kr/threejs-03/)

기본 뼈대 이해하기 Renderer, Scene, Camera – Three.js 강좌 | 디자인베이스

Fov란? https://www.researchgate.net/figure/Comparison-of-different-camera-FOVs-with-the-FOV-of-a-human-with-normal-vision-Creative_fig2_326881498

WebGLRenderer: https://threejs.org/docs/#api/en/renderers/WebGLRenderer