본문 바로가기
Three.js

3D 웹개발: Three.js 기본 구성 요소 소개

understandJ 2025. 3. 9. 11:39

Three.js로 3D 웹 개발 시작하기: 기본 구성 요소 

Three.js는 웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 강력한 JavaScript 라이브러리이다. 이 글에서는 Three.js 애플리케이션을 구성하는 핵심 요소인 장면(Scene), 카메라(Camera), 렌더러(Renderer)와 메쉬(Mesh)에 대해 자세히 알아본다.

 

Three.js, 3D 웹 개발의 핵심

Three.js 구성 요소
Three.js 구성 요소

 

 

 

Three.js는 복잡한 WebGL 코드를 직접 작성하지 않고도 3D 콘텐츠를 만들 수 있도록 다양한 기능과 도구를 제공한다. Three.js의 핵심 구성 요소들을 이해하는 것은 3D 그래픽스를 효과적으로 활용하는 데 필수적이다. Three.js를 사용하면 3D 모델링, 애니메이션, 인터랙티브한 시각 효과 등을 웹 페이지에 쉽게 통합할 수 있다.

 

Three.js 기본 요소: 장면, 카메라, 렌더러

 

Three.js 애플리케이션은 크게 장면(Scene), 카메라(Camera), 렌더러(Renderer)라는 세 가지 기본 요소로 구성된다. 이 요소들은 3D 객체를 시각적으로 표현하기 위한 필수적인 역할을 수행하며, 애플리케이션의 기본 골격을 형성한다.

  • 장면(Scene): 3D 객체를 담는 컨테이너 역할을 한다. 마치 연극 무대처럼, 3D 객체들이 배치되고 관리되는 공간이다.
  • 카메라(Camera): 장면을 인간의 시각에 맞게 투영하는 역할을 한다. 어떤 시점에서 장면을 바라볼지 결정하며, 원근감과 시야를 조절한다.
  • 렌더러(Renderer): 카메라를 통해 보이는 장면을 캔버스에 그리는 역할을 한다. 최종적으로 사용자에게 보여지는 이미지를 생성한다.

 

장면(Scene): 3D 세계의 중심

장면(Scene)은 3D 객체들이 존재하는 공간으로, 모든 것을 담는 컨테이너 역할을 한다. Three.js에서 Scene을 생성할 때 사용하는 클래스는 Scene이며, 생성자는 매개변수를 필요로 하지 않는다.

import { Scene } from 'three';

const scene = new Scene();

 

Scene은 World Space라는 3D 직교 좌표계를 정의하며, 이는 객체를 다룰 때 주요 기준점이 된다. Scene의 중심은 (0, 0, 0)으로, 객체를 추가하면 기본적으로 이 원점에 배치된다. Scene에 객체를 추가하면 Scene Graph에 배치되며, 이는 3D 트리 구조로 구성된다. 

 

 

Scene Graph
Scene Graph

 

카메라(Camera): 세상을 바라보는 창

카메라(Camera)는 Scene을 인간의 눈으로 이해할 수 있는 형태로 변환하는 역할을 한다. Scene Graphic을 인간의 시각에 맞게 변환하는 방법을 투영(Projections)이라고 한다. Three.js에서는 다양한 종류의 카메라를 제공하며, 대표적으로 PerspectiveCamera 와 OrthographicCamera가 있다.

 

PerspectiveCamera

PerspectiveCamera

원근 투영을 사용하여 Scene을 보는 카메라이다. 현실 세계와 유사한 원근감을 제공하며, 시야각(fov)과 화면비(aspect) 등의 개념을 사용한다.

import { PerspectiveCamera } from 'three';

const fov = 35; // 시야각
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // 가까운 clipping plane
const far = 100; // 먼 clipping plane

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

 

  • near : 카메라와 가장 가까운 가시 영역 거리 (near 보다 가까운 객체는 렌더링되지 않음)
  • far : 카메라에서 가장 멀리 렌더링할 수 있는 거리
  • fov : 카메라의 수직 시야각(단위: 도). 얼마나 넓은 범위를 볼 수 있는지 결정
    • fov가 클 경우: 넓은 범위를 볼 수 있지만 원근 왜곡이 심해진다.
    • fov가 작을 경우 : 좁은 범위를 볼 수 있으며, 줌인된 효과를 준다.
  • aspect : 카메라가 출력할 화면의 가로, 세로 비율. 일반적으로 화면의 크기 (width/height) 를 사용한다.
창 크기가 변경되면 반드시 aspect 를 업데이트하고, camera.updateProjectionMatrix() 를 호출해야 한다.

 

OrthographicCamera

공학 도면이나 설계 도면(블루프린트)을 만들 때 사용하는 투영 방식인 정사영을 사용하며, 2D 장면 생성이나 3D 장면 위에 겹쳐지는 사용자 인터페이스에 유용하다. 원근감이 없는 평행 투영을 사용한다.

 

렌더러(Renderer): 그림을 그리는 화가

렌더러(Renderer)는 Scene과 Camera를 통해 보이는 것을 캔버스에 그리는 역할을 한다. Three.js에서는 WebGLRenderer를 사용하여 3D 그래픽을 렌더링할 수 있다. 렌더러는 장면의 3D 데이터를 2D 이미지로 변환하여 화면에 표시한다. Scene, Camera, Renderer는 3D 애플리케이션의 기본 골격을 제공하며, Mesh가 가시성을 제공한다.

import { WebGLRenderer } from 'three';

const renderer = new WebGLRenderer();

 

메쉬(Mesh): 3D 객체의 실체

Mesh 구성 요소

 

메쉬(Mesh)는 3D 객체를 표현하는 가시적인 객체 유형으로, 기하학(geometry)과 재질(material)을 매개변수로 받는다.

import { Mesh } from 'three';

const mesh = new Mesh(geometry, material);

 

메쉬는 3D 공간에 표현되는 객체를 의미하며, Three.js에서 3D 모델을 만들고 렌더링하는 데 필수적인 요소이다.

 

기하학(Geometry) 

Mesh의 형태를 정의하는 속성값으로, 다양한 원시 모델을 지원한다. 예를 들어, 2x2x2 정육면체 3D 모델을 만들 수 있다.

import { BoxGeometry } from 'three';

const length = 2;
const width = 2;
const depth = 2;

const geometry = new BoxGeometry(length, width, depth);
// 생략된 매개변수: widthSegments, heightSegments, depthSegments

 

생성자는 최대 여섯 개의 매개변수를 받으며, 기본값이 제공된다.

 

재질(Material)

Mesh의 표면이 어떻게 보이는지를 정의하며, MeshBasicMaterial은 광원의 영향을 받지 않는다. 재질은 색상, 질감, 반사율 등 객체의 시각적 속성을 결정한다.

import { MeshBasicMaterial } from 'three';

const material = new MeshBasicMaterial();

 

Mesh 생성 및 Scene 추가

Geometry와 Material을 생성한 후, 이를 매개변수로 전달하여 Mesh를 생성하고 Scene에 추가할 수 있다. Mesh를 생성하고 Scene에 추가하는 과정을 통해 3D 객체를 화면에 표시할 수 있다.

// geometry 생성
const geometry = new BoxGeometry(2, 2, 2);

// 기본 material 생성
const material = new MeshBasicMaterial();

// geometry 와 material을 포함한 Mesh 생성
const cube = new Mesh(geometry, material);

// Mesh 를 Scene 에 추가
scene.add(cube);

 

Scene 렌더링

모든 준비가 끝나면, renderer.render(scene, camera);를 사용하여 Scene을 렌더링할 수 있다. 렌더링은 장면을 카메라 시점에서 캔버스에 그리는 과정이며, 이 과정을 통해 3D 객체가 화면에 표시된다. 렌더링은 일반적으로 애니메이션 루프 안에서 반복적으로 수행되어, 움직이는 3D 장면을 만들 수 있다.

renderer.render(scene, camera);

 

이 코드는 Renderer 에게 Camera를 사용해 Scene의 정적인 이미지를 만들고 그 이미지를 `<canvas>`요소에 출력하라고 지시한 것이다.

 

Three.js의 기본 구성 요소인 장면, 카메라, 렌더러, 메쉬를 이해하는 것은 3D 웹 개발의 첫 걸음이다. 이 튜토리얼에서 소개된 개념들을 바탕으로 Three.js를 사용하여 3D 그래픽을 만들고 렌더링하는 기초 지식을 쌓을 수 있다. 

 

티스토리툴바