Three.js 완벽 가이드 | 3D 웹·WebGL·Scene·Camera·Animation·실전 활용

이 글의 핵심

Three.js로 3D 웹을 구축하는 완벽 가이드입니다. Scene, Camera, Mesh, Material, Animation, React Three Fiber까지 실전 예제로 정리했습니다.

실무 경험 공유: 제품 3D 뷰어를 Three.js로 구현하면서, 사용자 참여도가 3배 증가하고 구매 전환율이 40% 향상된 경험을 공유합니다.

들어가며: “3D가 필요해요”

실무 문제 시나리오

시나리오 1: 제품을 3D로 보여주고 싶어요

이미지는 제한적입니다. Three.js로 인터랙티브 3D를 제공할 수 있습니다. 시나리오 2: 데이터 시각화가 필요해요

2D는 부족합니다. Three.js로 3D 시각화를 구현할 수 있습니다. 시나리오 3: 게임을 만들고 싶어요

Canvas는 제한적입니다. Three.js로 3D 게임을 만들 수 있습니다.

1. Three.js란?

핵심 특징

Three.js는 3D 웹 라이브러리입니다. 주요 장점:

• WebGL: 하드웨어 가속
• 간단한 API: WebGL 추상화
• 풍부한 기능: Geometry, Material, Light
• 애니메이션: 부드러운 애니메이션
• React 통합: React Three Fiber

---

2. 설치 및 기본 설정

설치

npm install three
npm install -D @types/three

기본 Scene

// main.ts
import * as THREE from 'three';
// Scene
const scene = new THREE.Scene();
// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Animation Loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

---

3. Geometry & Material

다양한 Geometry

// 박스
const box = new THREE.BoxGeometry(1, 1, 1);
// 구
const sphere = new THREE.SphereGeometry(1, 32, 32);
// 평면
const plane = new THREE.PlaneGeometry(5, 5);
// 원통
const cylinder = new THREE.CylinderGeometry(1, 1, 2, 32);

Material

// 기본
const basic = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Lambert (빛 반응)
const lambert = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
// Phong (반사)
const phong = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  shininess: 100,
});
// Standard (PBR)
const standard = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.5,
  roughness: 0.5,
});

---

4. Light

TypeScript/JavaScript 예제 코드입니다.

// Ambient Light (전체 조명)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// Directional Light (방향 조명)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// Point Light (점 조명)
const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(0, 3, 0);
scene.add(pointLight);
// Spot Light (스포트 조명)
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(0, 5, 0);
scene.add(spotLight);

---

5. Camera Controls

OrbitControls

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

---

6. Texture

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('/textures/brick.jpg');
const material = new THREE.MeshStandardMaterial({
  map: texture,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

---

7. React Three Fiber

설치

npm install @react-three/fiber @react-three/drei

기본 사용

// App.tsx
// 필요한 모듈 import
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}
export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <Box />
      <OrbitControls />
    </Canvas>
  );
}

애니메이션

import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';
function RotatingBox() {
  const meshRef = useRef<THREE.Mesh>(null);
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.x += 0.01;
      meshRef.current.rotation.y += 0.01;
    }
  });
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  );
}

---

정리 및 체크리스트

핵심 요약

• Three.js: 3D 웹 라이브러리
• WebGL: 하드웨어 가속
• Scene: 3D 공간
• Camera: 시점
• Light: 조명
• React Three Fiber: React 통합

구현 체크리스트

• Three.js 설치
• Scene 설정
• Geometry & Material 생성
• Light 추가
• Camera Controls 구현
• Texture 적용
• Animation 구현

---

같이 보면 좋은 글

• WebAssembly 완벽 가이드
• Framer Motion 완벽 가이드
• Canvas API 가이드

---

이 글에서 다루는 키워드

Three.js, 3D, WebGL, Animation, React, Frontend, Graphics

내부 동작과 핵심 메커니즘

이 글의 주제는 「Three.js 완벽 가이드 | 3D 웹·WebGL·Scene·Camera·Animation·실전 활용」입니다. 여기서는 앞선 설명을 구현·런타임 관점에서 한 번 더 압축합니다. 구성 요소 간 책임 분리와 관측 가능한 지점을 기준으로 생각하면, “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)이 어디서 터지는가”가 한눈에 드러납니다.

처리 파이프라인(개념도)

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

알고리즘·프로토콜 관점에서의 체크포인트

• 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(예: 버퍼 경계, 프로토콜 상태, 트랜잭션 격리)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
• 결정성: 동일 입력에 동일 출력이 보장되는 순수한 층과, 시간·네트워크에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
• 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합처럼 “한 번의 호출이 아니라 누적되는 비용”을 의심 목록에 넣습니다.

---

프로덕션 운영 패턴

실서비스에서는 기능 구현과 함께 관측·배포·보안·비용이 동시에 요구됩니다. 아래는 팀에서 자주 쓰는 최소 체크리스트입니다.

영역	운영 관점에서의 질문
관측성	요청 단위 상관 ID, 에러율/지연 분위수, 주요 의존성 타임아웃이 보이는가
안전성	입력 검증·권한·비밀 관리가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등한 연산에만 적용되는가, 서킷 브레이커·백오프가 있는가
성능	캐시 계층·배치 크기·풀링·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리, 마이그레이션 호환성이 문서화되어 있는가

운영 환경에서는 “개발자 PC에서는 재현되지 않던 문제”가 시간·부하·데이터 크기 때문에 드러납니다. 따라서 스테이징의 데이터 양·네트워크 지연을 가능한 한 현실에 가깝게 맞추는 것이 중요합니다.

---

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스 컨디션, 타임아웃, 외부 의존성 불안정	최소 재현 스크립트 작성, 분산 트레이스·로그 상관관계 확인
성능 저하	N+1 쿼리, 동기 I/O, 잠금 경합, 과도한 직렬화	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 클로저/이벤트 구독 누수, 대용량 객체의 불필요한 복사	상한·TTL·스냅샷 비교(힙 덤프/트레이스)
빌드·배포만 실패	환경 변수·권한·플랫폼 차이	CI 로그와 로컬 diff, 컨테이너/런타임 버전 핀(pin)

권장 디버깅 순서: (1) 최소 재현 만들기 (2) 최근 변경 범위 좁히기 (3) 의존성·환경 변수 차이 확인 (4) 관측 데이터로 가설 검증 (5) 수정 후 회귀·부하 테스트.

자주 묻는 질문 (FAQ)

Q. 성능은 어떤가요?

A. WebGL 기반으로 매우 빠릅니다. 하드웨어 가속을 사용합니다.

Q. 모바일에서도 작동하나요?

A. 네, 대부분의 모바일 브라우저에서 작동합니다.

Q. React와 함께 사용할 수 있나요?

A. 네, React Three Fiber를 사용하면 완벽하게 통합됩니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 많은 웹사이트에서 안정적으로 사용하고 있습니다.