웹 브라우저를 3D 우주로 만드는
가장 쉽고 강력한 도구,
Three.js 완벽 입문 바이블
어려운 그래픽스 이론은 덜어내고 16장 모든 슬라이드에 지금 실시간으로 돌아가는 Three.js 3D 예시 화면을 직접 넣었습니다. Three.js가 무엇이고, 어디에 쓰이며, 왜 전 세계 1위인지부터, 코딩을 몰라도 AI에게 어떻게 말하면 화려한 3D 웹사이트와 영상을 만들어 주는지(프롬프트 + 실제 3D 결과물) 눈으로 직접 확인하세요!
- Part 1 (02~04p): Three.js의 정체, 4대 활용처(실시간 3D 데모), 유명한 이유
- Part 2 (05~08p): 영화 촬영장 4요소, 도형·재질·조명 라이브 비교, 15줄 첫 코드
- Part 3 (09~10p): 마우스 인터랙션 원리와 직접 눌러보는 3D 스튜디오
- Part 4 (11~16p): [위: AI 프롬프트 / 아래: 실제 3D 결과물] 완벽 비교 & 치트시트
Three.js란 무엇인가? — "평평한 2D 웹페이지에 깊이(Z축)와 생명을 불어넣는 마법"
종이처럼 납작한 기존 웹 화면(좌측)과 Three.js가 만들어내는 입체 공간(우측)의 차이를 아래 실시간 화면으로 비교해 보세요
기존 웹사이트는 가로(X)와 세로(Y)밖에 없는 납작한 종이입니다. Three.js는 여기에 앞뒤 깊이(Z축)와 빛·그림자를 더해 화면 안에 진짜 입체 세계를 만듭니다.
Three.js로 3D 화면을 만드는 과정은 영화감독이 세트장에서 영화를 찍는 4단계와 완전히 똑같습니다.
모든 물체와 조명을 배치할 가상의 3D 우주 공간입니다.
상자나 공 모양(Geometry)에 금속·유리 질감(Material)을 입힙니다.
빛을 비춰야 입체적인 명암과 반짝임, 그림자가 살아납니다.
어느 각도에서 찍어 모니터 화면에 초당 60번 쏴줄지 결정합니다.
Three.js는 어디에 쓰이는가? — 지금 눈앞에서 돌아가는 4대 핵심 활용처
각 카드 하단에서 실제로 구동 중인 3D 자동차 쇼룸 · 공간 비행 · 3D 지구본 · 기하학 모션을 확인해 보세요
360도 3D 제품 쇼케이스 & 자동차 컨피규레이터
운동화·아이폰·자동차를 360도로 돌려보고 색상을 실시간으로 바꿔보는 쇼핑몰 핵심 기술입니다.
스크롤에 맞춰 날아가는 몰입형 브랜드 사이트
스크롤을 내릴 때마다 카메라가 3D 포털과 우주를 통과하며 압도적인 첫인상을 남기는 홍보 웹입니다.
글로벌 3D 지구본 & 디지털 트윈 관제 화면
전 세계 네트워크 교류나 스마트 공장의 실시간 가동 현황을 입체 지구본과 빌딩으로 시각화합니다.
무설치 3D 웹 게임 & AI 모션 그래픽 비디오
링크 하나로 즐기는 3D 미니게임과 에프터이펙트 없이 코드로 뽑아내는 60fps 모션 영상입니다.
Three.js는 왜 그렇게 유명한가? — "1,000줄짜리 수학 지옥을 단 몇 줄로!"
순수 WebGL로는 엄두도 못 내던 복합 3D 장면(우측 라이브 화면)을 직관적인 영어 단어 몇 개로 즉시 조립할 수 있기 때문입니다
과거에는 3D 상자 하나를 그리려고 행렬 수학 공식 600줄을 짜야 했지만, Three.js는 "모양 만들고 → 재질 입히고 → 무대에 올려라"라는 상식적인 명령어로 끝납니다.
gl.bindBuffer(gl.ARRAY_BUFFER...);
gl.vertexAttribPointer(...);
gl.compileShader(vShader);
mat4.perspective(projMatrix...);
// 행렬 수학 580줄 계속...
const mat = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);
// 우측 같은 작품이 바로 완성!
- 1. 무설치 URL 공유: 수 기가바이트 앱 설치 없이 링크 클릭 1초 만에 실행됩니다.
- 2. 하드웨어 GPU 가속: 스마트폰과 노트북 그래픽카드를 자동으로 최대 활용합니다.
- 3. AI 시대 최강자: 전 세계에 예제가 가장 많아 ChatGPT·Claude가 가장 완벽하게 코딩해 줍니다.
아래 화면은 무지개빛 법선 재질(MeshNormalMaterial)을 입힌 매듭 도형 주변으로 8개의 위성 큐브가 회전하는 실시간 장면입니다.
어떻게 작동하는가? — 무대(Scene) · 배우(Mesh) · 조명(Light) · 카메라(Camera)
우측 실시간 3D 스튜디오 화면에서 격자 바닥(무대), 회전하는 도형(배우), 공전하는 빛(조명)이 어떻게 어우러지는지 확인하세요
| 핵심 부품 | 쉬운 역할 설명 | 실제 코드 명령어 |
|---|---|---|
| ① Scene (무대 공간) |
물체와 조명을 올려놓는 3D 도화지 그릇 (우측의 파란 격자 공간) | const scene = new THREE.Scene()scene.add(mesh, light) |
| ② Mesh (배우·물체) |
뼈대 모양(Geometry)에 표면 옷(Material)을 입힌 실제 3D 물체 | new THREE.Mesh(geo, mat)mesh.position.set(x, y, z) |
| ③ Light (조명) |
물체에 입체적인 밝기·음영·반짝임을 만들어 주는 빛 | new THREE.DirectionalLight()new THREE.PointLight() |
| ④ Camera & Renderer |
무대를 바라보는 눈(Camera)과 화면에 초당 60번 그려주는 영사기 | new THREE.PerspectiveCamera(...)renderer.render(scene, camera) |
scene.add(물체)로 무대에 올려야 화면에 나타납니다!
아래 화면은 격자 바닥(Scene Grid) 위에서 3D 보석(Mesh)이 돌고, 노란색 태양 조명 구슬(Light Helper)이 주변을 공전하며 빛을 비추는 모습입니다.
물체 만들기 — 4가지 기본 뼈대(Geometry)와 4가지 표면 옷(Material) 실시간 비교
왼쪽 캔버스에서는 대표 도형 4종이, 오른쪽 캔버스에서는 같은 구(공)에 서로 다른 4가지 재질을 입힌 모습이 실시간으로 돌아갑니다
코드 한 줄로 바로 불러올 수 있는 상자(Box) · 구(Sphere) · 원기둥/원뿔(Cone) · 도넛(Torus) 4가지 기본 뼈대입니다.
- 외부 3D 모델: 자동차나 캐릭터처럼 복잡한 모양은
GLTFLoader로.glb파일을 불러옵니다.
똑같은 도형이라도 어떤 재질을 입히느냐에 따라 단색(Basic) · 그물망(Wireframe) · 금속(Standard) · 무지개 법선(Normal)으로 달라집니다.
- 실무 핵심: 현실적인 빛 반사와 유리를 표현할 땐
MeshStandardMaterial/MeshPhysicalMaterial을 씁니다.
3D의 생명은 '조명(Light)'이다 — 실시간 3색 궤도 조명이 만드는 금속 반사
우측 실시간 3D 화면에서 파란색·분홍색·초록색 3개의 전구(PointLight)가 금속 조각상 주위를 돌며 어떻게 빛을 섞는지 관찰해 보세요
방 안 전체에 깔리는 은은한 기본 밝기입니다. 그림자 부분이 완전히 시커멓게 죽지 않게 받쳐줍니다.
한 방향에서 강하게 내리쬐는 햇빛입니다. 뚜렷한 입체감과 바닥 그림자(Shadow)를 만듭니다.
우측 화면처럼 특정 위치에서 컬러 네온 빛을 뿜어내어 표면에 화려한 하이라이트를 만듭니다.
위쪽에서는 푸른 하늘빛, 아래쪽에서는 따뜻한 지면 반사광을 비춰 자연스러운 야외 느낌을 냅니다.
중앙의 은빛 금속 조각상 주변을 사이언(Cyan) · 마젠타(Pink) · 골드(Gold) 3개의 광원 구슬이 실시간으로 회전하며 표면에 다채로운 빛 반사를 만들어냅니다.
어떻게 코딩하는가? — 왼쪽 15줄 코드가 실행되면 오른쪽 3D 화면이 됩니다!
무대 세팅(5줄) → 물체·조명 추가(5줄) → 애니메이션 촬영(5줄), 이 3단락 구조만 눈에 익히면 끝입니다
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(w, h); document.body.appendChild(renderer.domElement);
// [2단락] 에메랄드빛 큐브(Mesh)와 조명(Light)을 무대에 올리기
const geo = new THREE.BoxGeometry(1.6, 1.6, 1.6);
const mat = new THREE.MeshStandardMaterial({ color: 0x10b981, roughness: 0.2 });
const cube = new THREE.Mesh(geo, mat);
const light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(3, 5, 4);
scene.add(cube, light, new THREE.AmbientLight(0xffffff, 0.5));
camera.position.z = 4; // 카메라 뒤로 물리기
// [3단락] 초당 60번씩 큐브를 회전시키며 화면에 그리기
renderer.setAnimationLoop(() => {
cube.rotation.x += 0.01; cube.rotation.y += 0.015;
renderer.render(scene, camera);
});
왼쪽 코드가 그대로 실행된 결과입니다. 0x10b981 에메랄드 상자가 조명을 받아 반짝이며 매 프레임 조금씩 회전합니다.
camera.position.z = 4를 안 쓰면 카메라가 상자 속에 갇혀 안 보입니다!
마우스에 반응하는 인터랙티브 3D — 지금 마우스를 움직여 우측 화면을 흔들어 보세요!
단순히 혼자 도는 영상이 아니라, 사용자의 마우스 위치·드래그·스크롤에 실시간으로 반응하는 3대 기술
우측 화면처럼 마우스 커서의 (X, Y) 좌표를 읽어 카메라나 물체가 마우스를 부드럽게 따라오게 만듭니다.
마우스 드래그로 물체를 이리저리 돌려보고 휠로 줌인·줌아웃합니다. enableDamping = true를 켜면 손가락을 떼도 부드럽게 감속합니다.
마우스 위치에서 보이지 않는 레이저 광선을 쏴서 어떤 3D 물체를 가리켰는지 알아내고 색상을 바꾸거나 팝업을 띄웁니다.
지금 마우스를 화면 좌우·상하로 움직여 보세요! 마우스 위치에 맞춰 중앙의 3D 코어와 주변 30개의 플로팅 큐브들이 실시간으로 기울어지며 반응합니다.
[직접 조작 체험] 우측 버튼을 클릭해 3D 도형 · 재질 · 회전 속도를 바꿔보세요!
Three.js가 코드 한 줄의 변경만으로 어떻게 실시간으로 모양과 질감을 바꾸는지 직접 테스트해 볼 수 있는 스튜디오입니다
원하는 뼈대(Geometry)와 표면 옷(Material) 버튼을 눌러보세요. 아래쪽 코드 창도 실시간으로 함께 바뀝니다!
const geo = new THREE.TorusKnotGeometry(1.1, 0.34, 120, 20);
const mat = new THREE.MeshStandardMaterial({ color: 0x38bdf8, metalness: 0.7, roughness: 0.18 });
const mesh = new THREE.Mesh(geo, mat);
AI에게는 어떻게 말해야 하는가? — [위: 프롬프트 지시문] vs [아래: 실제 3D 결과물]
대충 말했을 때 나오는 초라한 3D 화면(좌측 하단)과 5대 핵심 키워드를 넣어 말했을 때 나오는 작품(우측 하단)을 직접 비교해 보세요!
[실전 프롬프트 3선] 위쪽 프롬프트를 AI에 넣으면 아래쪽 3D 화면이 그대로 나옵니다!
각 카드의 '프롬프트 복사' 버튼을 눌러 ChatGPT·Claude에 붙여넣으면 카드 하단에 돌아가고 있는 3D 예시가 즉시 만들어집니다
AI가 만든 화면을 단숨에 전문가 작품으로 바꾸는 3대 업그레이드 명령어
기본 결과물이 심심할 때 위쪽 문장을 추가로 말해주면 아래쪽 3D 화면처럼 고급 광택·네온 후광·파동 효과가 즉시 켜집니다!
플라스틱 같은 표면을 보석·크롬으로 바꿀 때
사이버펑크·SF 영화처럼 빛이 번지게 할 때
정지된 바닥 대신 바다처럼 일렁이게 할 때
수천 개의 별과 물체가 돌아가도 안 끊기는 비결 — 묶음 처리(Instancing & Points)
우측 캔버스에는 지금 2,000개의 3D 입자가 소용돌이치고 있지만, 묶음 렌더링 덕분에 스마트폰에서도 60fps로 매끄럽게 돌아갑니다
물체 2,000개를 하나씩 따로 그리면(Draw Call 2,000번) 컴퓨터가 멈춥니다. 우측 화면처럼 하나의 덩어리로 묶어 한 번에 그리면(Draw Call 1번) 초고속으로 작동합니다.
모든 조명에 실시간 그림자(castShadow)를 켜면 속도가 급격히 느려집니다. 그림자는 핵심 태양광 1개에만 켭니다.
renderer.setPixelRatio(Math.min(devicePixelRatio, 2)) 한 줄만 넣어주면 화질은 선명하면서 배터리 소모를 절반으로 줄입니다.
아래 화면은 2,000개의 별 입자를 개별 물체가 아닌 단일 THREE.Points 버퍼로 묶어 렌더링하기 때문에, 그래픽카드에 부담을 주지 않고 부드럽게 회전합니다.
왕초보를 위한 4단계 정복 로드맵 & 함께 쓰면 좋은 무료 보물창고
단순한 1단계 상자에서 시작해 4단계 복합 우주 정거장(하단 실시간 3D)까지 발전하는 가장 빠른 길
내가 직접 3D를 못 만들어도 전문가가 만든 자동차·우주선·캐릭터(.glb) 파일을 무료로 받아 바로 쓸 수 있습니다.
파워포인트처럼 마우스로 3D를 디자인한 뒤 Three.js 코드로 내보내는 도구입니다.
리액트(React) 환경에서 Three.js를 레고 블록 조립하듯 쉽게 쓸 수 있게 해 주는 인기 1위 확장팩입니다.
수백 가지 환상적인 3D 데모와 전체 소스 코드가 무료로 공개되어 있는 공식 놀이터입니다.
아래 캔버스는 ① 기본 와이어프레임 → ② 조명 입힌 도형 → ③ 궤도 결합 → ④ 복합 우주 아티팩트로 진화하는 4단계를 나란히 보여줍니다.
Three.js 핵심 개념 · 필수 코드 · AI 프롬프트 총정리 마스터 치트시트
우측 상단 버튼을 누르면 오늘 배운 핵심 코드 구조와 만능 AI 프롬프트가 클립보드에 한 번에 복사됩니다
- ① Scene (무대):
new THREE.Scene()— 모든 물체와 빛을 담는 3D 우주 그릇 - ② Camera (눈):
PerspectiveCamera(75, w/h, 0.1, 1000)— 원근감 투영 카메라 - ③ Mesh (물체):
Geometry(뼈대 모양)+Material(표면 질감)의 결합 - ④ Renderer (영사기):
WebGLRenderer+setAnimationLoop로 초당 60회 촬영 - 필수 재질 3대장:
•MeshBasicMaterial: 조명 무반응 단색·와이어프레임
•MeshStandardMaterial: 금속성·거칠기 표준 실사 재질
•MeshPhysicalMaterial: 투명 유리 굴절·자동차 코팅
- [1단계] 실행 형태: "외부 이미지 없이 단일 HTML 파일(CDN 포함)로 바로 실행되게 짜줘"
- [2단계] 주인공 물체: "중앙엔 금속·유리 재질 다면체와 궤도 링, 배경엔 1,500개 별 입자(Points) 배치"
- [3단계] 조명 & 분위기: "컬러 포인트 조명 2개와 은은한 안개, 반투명 유리(Glassmorphic) UI 카드 배치"
- [4단계] 인터랙션: "마우스 이동 시 부드러운 카메라 시차 반응 + OrbitControls 드래그 회전"
- [5단계] 안전장치: "창 리사이즈 자동 대응, 글자와 3D 요소 겹침 방지, 모바일 픽셀 배율 2 제한"
오늘 배운 다면체 코어 + 다중 궤도 링 + 컬러 조명 + 우주 파티클이 모두 결합된 피날레 3D 장면입니다.