Ch.2 JavaScript 라이브러리 15선
Three.js — 3D 그래픽 브라우저에서
핵심 개념
Three.js
웹 브라우저에서 3D 그래픽을 렌더링하는 라이브러리
WebGL
브라우저에서 GPU를 활용한 3D 렌더링 API
핵심 내용
브라우저 안에서 3D 세계를 만드는 라이브러리, Three.js를 만나보세요.
Three.js = 웹 브라우저를 3D 캔버스로 바꿔주는 도구. 유니티나 언리얼 없이도 회전하는 큐브, 3D 지구본, 인터랙티브 건축 모델을 만들 수 있습니다. WebGL이라는 기술 위에서 동작하지만, 복잡한 수학은 Three.js가 대신 처리해줍니다.
나이키 신발을 360도로 돌려보는 웹사이트, 구글 어스처럼 지구를 돌리는 페이지 — 전부 Three.js로 만든 것입니다.
제품 사진만으로는 부족할 때, 고객이 직접 돌려보고 확대할 수 있는 3D 뷰어가 필요할 때.
수동 방식: 블렌더에서 12방향 렌더링 → 이미지 12장 올리기. 각도 변경 불가. 파일 용량 폭발. 인터랙션? 꿈도 못 꿉니다.
Three.js 코드: 3D 모델 파일 하나 로드하면 끝. 마우스 드래그로 360도 회전, 스크롤로 확대/축소. 모바일 터치까지 자동 지원.
CDN 한 줄이면 설치 끝. 3D의 기본 구조는 딱 3가지: Scene(무대), Camera(카메라), Renderer(화면 출력).
<script src="https://cdn.jsdelivr.net/npm/three@0.160/build/three.min.js"></script>이제 3D 큐브를 화면에 띄워봅시다. 영화 촬영과 똑같습니다 — 무대를 세우고, 카메라를 놓고, 배우(큐브)를 올립니다.
// 1. 무대(Scene) 만들기 — 모든 3D 오브젝트가 올라갈 공간
const scene = new THREE.Scene();
// 2. 카메라 배치 — 관객의 눈
const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
camera.position.z = 5;
// 3. 렌더러 생성 — 무대를 화면에 그리는 장치
const renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);
// 4. 큐브(배우) 등장 — 모양(Geometry) + 재질(Material) = Mesh
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(cube);
// 5. 찰칵! 한 프레임 렌더링
renderer.render(scene, camera);브라우저에 초록색 정사각형이 나타납니다. 아직 회전하지 않지만, 이것이 3D 큐브를 정면에서 바라본 모습입니다. 옆에서 보면 입체라는 걸 알 수 있죠.
AI에게 3D를 요청할 때는 움직임, 재질, 조명을 구체적으로 말해야 원하는 결과가 나옵니다.
좋은 프롬프트 예시: "Three.js로 3D 지구본을 만들어줘. 마우스로 회전하고 도시에 핀 마커 표시. OrbitControls로 드래그 회전, TextureLoader로 지구 텍스처 입히기. 서울, 뉴욕, 런던 위치에 빨간 점 표시."
프롬프트 변형: "지구본 위에 서울↔뉴욕 구간을 호(arc)로 연결하는 비행 경로를 추가해줘. 호는 하늘색 점선으로, 비행기 아이콘이 경로를 따라 이동하는 애니메이션도 넣어줘."
// 조명이 있는 회전 큐브 — AI가 생성해준 코드
const material = new THREE.MeshStandardMaterial({ color: 0x4488ff });
const cube = new THREE.Mesh(new THREE.BoxGeometry(), material);
scene.add(cube);
// 조명 추가 — 빛이 있어야 입체감이 산다
const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
// 매 프레임 회전 — requestAnimationFrame이 핵심
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.005;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();MeshBasicMaterial → 빛 영향 없음 (밋밋한 단색) MeshStandardMaterial → 빛을 받아 그림자와 하이라이트가 생김 프롬프트에 'StandardMaterial + 조명'을 명시하면 훨씬 현실적인 결과를 얻습니다.
3D 제품 뷰어를 만들어봅시다. 마우스로 드래그하면 회전, 스크롤하면 확대/축소되는 인터랙티브 뷰어입니다.
<!DOCTYPE html>
<html><head><title>3D 제품 뷰어</title>
<style>body { margin: 0; overflow: hidden; background: #f5f0e8; }</style></head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.160/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160/examples/js/controls/OrbitControls.js"></script>
<script>
// 기본 세팅
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f0e8);
const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
camera.position.set(3, 2, 4);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// 제품 (금색 박스로 대체)
const product = new THREE.Mesh(
new THREE.BoxGeometry(1.5, 1, 1),
new THREE.MeshStandardMaterial({ color: 0xd4a574, metalness: 0.3, roughness: 0.4 })
);
product.castShadow = true;
scene.add(product);
// 바닥
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10),
new THREE.MeshStandardMaterial({ color: 0xe8e0d0 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -0.5;
floor.receiveShadow = true;
scene.add(floor);
// 조명
const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
dirLight.position.set(5, 8, 5);
dirLight.castShadow = true;
scene.add(dirLight);
scene.add(new THREE.AmbientLight(0x808080));
// 마우스 컨트롤
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
</script></body></html>viewer.html로 저장하고 브라우저에서 열어보세요. 마우스 왼쪽 드래그로 회전, 오른쪽 드래그로 이동, 스크롤로 확대/축소됩니다. OrbitControls의 enableDamping 덕분에 놓으면 관성으로 부드럽게 멈춥니다.
실제 프로젝트에서는 BoxGeometry 대신 GLTFLoader로 블렌더에서 만든 .glb 파일을 불러옵니다. AI에게 "GLTFLoader로 product.glb를 로드해줘"라고 요청하면 됩니다.
Three.js에서 3D 오브젝트를 구성하는 두 요소는?
핵심 용어
Three.js
웹 브라우저에서 3D 그래픽을 렌더링하는 라이브러리
WebGL
브라우저에서 GPU를 활용한 3D 렌더링 API
제품 3D 뷰어
신발, 가구, 전자제품을 360도 회전하며 살펴보는 쇼핑몰 페이지
건축 시각화
아파트 내부를 가상으로 걸어 다니는 모델하우스 투어
게임 & 인터랙티브
브라우저에서 바로 플레이하는 3D 미니게임이나 시뮬레이션
포트폴리오
회전하는 3D 로고, 파티클 배경 효과로 인상적인 첫 화면
핵심 정리
- 1Three.js의 3요소: Scene(무대) + Camera(시점) + Renderer(화면 출력)
- 2Mesh = Geometry(모양) + Material(재질). StandardMaterial + 조명을 써야 입체감이 살아난다
- 3requestAnimationFrame 루프로 매 프레임 rotation 값을 바꿔 회전 애니메이션을 구현한다
- 4OrbitControls를 추가하면 마우스 드래그 회전·확대·이동이 한 번에 해결된다
- 5프롬프트에 재질(Material), 조명 종류, 회전축, 컨트롤 방식을 명시하면 완성도가 올라간다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작