topic★★★★★난이도

Three.js — 3D 그래픽

WebGL을 추상화한 3D 그래픽 라이브러리. Scene, Camera, Renderer 세 요소로 브라우저 속 3D 세계를 구현.

#Three.js#3D#WebGL#그래픽

왜 배우는가

게임, 인터랙티브 포트폴리오, 제품 3D 뷰어 — 브라우저에서 3D를 보여주려면 Three.js가 사실상 표준이다. WebGL의 복잡함을 감추고 직관적인 API를 제공한다.

Three.js는 브라우저 속 3D 세계를 만드는 도구다. 영화관에 비유하면 Scene(무대), Camera(카메라), Renderer(프로젝터) 세 가지를 세팅하고, 그 위에 Mesh(물체)와 Light(조명)를 배치하면 된다.

Three.js — Scene·Camera·Renderer 세 요소로 브라우저 안에 3D 큐브를 그리는 구조

용도	설명
3D 제품 뷰어	신발·가구를 360도 회전하며 확인
인터랙티브 포트폴리오	스크롤에 반응하는 3D 배경
데이터 시각화	3차원 산점도, 지구본
웹 게임	간단한 3D 게임 (러닝 게임, 퍼즐)

javascript

// npm install three
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(cube);
camera.position.z = 5;
renderer.render(scene, camera);

Scene → Camera → Renderer를 생성하고, BoxGeometry(정육면체)를 추가한 뒤 render()를 호출하면 초록색 큐브가 화면에 나타난다.

Claude Code 팁: "Three.js로 회전하는 지구본 만들어줘"처럼 구체적으로 지시하면 텍스처 매핑, OrbitControls까지 포함된 코드를 생성해준다.