나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2026-01-15 11:17:53

Three.js

[include(틀:소프트웨어 정보
, 이름 = Three.js
, 장르 = 라이브러리, 3D 모델링, 웹 프레임워크
, 개발 = Ricardo Cabello (Mr.doob) 외 커뮤니티
, 발표 = 2010년 4월
, 최신 버전 = r160 (매달 갱신됨)
, 언어 = JavaScript, GLSL
, 플랫폼 = 웹 브라우저 (WebGL)
, 라이선스 = MIT 라이선스
, 사이트 = 공식 홈페이지
)]

1. 개요2. 역사3. 주요 특징4. 핵심 구성 요소5. 생태계6. 예제 코드7. 여담

1. 개요

Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스(3D Graphics)를 구현하기 위해 사용되는 JavaScript 라이브러리이다.

웹 브라우저에서 하드웨어 가속 3D 그래픽을 렌더링하기 위한 로우 레벨 API인 WebGL을 기반으로 만들어졌다. WebGL 자체는 코드가 매우 복잡하고 수학적인 지식이 많이 필요해 진입 장벽이 높은데, Three.js는 이를 추상화하여 개발자들이 훨씬 쉽고 직관적으로 3D 장면(Scene)을 구성할 수 있게 도와준다.

사실상 웹 3D 그래픽 분야의 표준 라이브러리(De facto Standard)로 취급받는다.

2. 역사

2010년 4월, 'Mr.doob'이라는 닉네임으로 유명한 리카르도 카벨로(Ricardo Cabello)가 처음 공개했다. 초기에는 ActionScript (플래시)나 HTML5 Canvas 렌더러 등을 지원했으나, WebGL이 웹 표준으로 자리 잡으면서 현재는 WebGL 렌더러가 핵심이 되었다.

GitHub에서 가장 인기 있는 JavaScript 프로젝트 중 하나이며, 수많은 기여자(Contributor)들에 의해 활발하게 유지 보수되고 있다.

3. 주요 특징

4. 핵심 구성 요소

Three.js로 3D 화면을 만들기 위해서는 필수적으로 다음 3가지 요소가 필요하다.
  1. 장면 (Scene): 물체, 조명, 카메라가 배치되는 무대 공간.
    2. 카메라 (Camera): 장면을 바라보는 시점. (주로 원근감을 표현하는 `PerspectiveCamera`가 쓰인다.)
    3. 렌더러 (Renderer): 카메라에 잡힌 장면을 실제 `<canvas>` 태그에 그려주는 역할.

5. 생태계

워낙 인기가 많다 보니 Three.js를 기반으로 한 파생 라이브러리나 프레임워크 생태계도 거대하다.

6. 예제 코드

가장 기본적인 '회전하는 큐브(Cube)'를 띄우는 예제이다.

#!syntax javascript
import * as THREE from 'three';

// 1. 장면 생성
const scene = new THREE.Scene();

// 2. 카메라 생성 (시야각, 종횡비, 근거리, 원거리)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 3. 렌더러 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. 큐브 생성 (기하학 + 재질 = 메쉬)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 5. 애니메이션 루프
function animate() {
	requestAnimationFrame(animate);

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render(scene, camera);
}

animate();

7. 여담


분류