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

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 고급

이 글의 핵심

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

// 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 { 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 통합

구현 체크리스트

같이 보면 좋은 글

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

이 글에서 다루는 키워드

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

자주 묻는 질문 (FAQ)

Q. 성능은 어떤가요?

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

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

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

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

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

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

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