3D 웹사이트는 시각적 몰입감을 제공하며, Three.js는 이를 쉽게 구현할 수 있도록 돕는 강력한 라이브러리입니다. 이번 글에서는 Three.js의 기본 개념과 간단한 3D 모델링 적용 방법을 살펴봅니다.
1. Three.js란?
Three.js의 핵심 개념
Three.js는 WebGL을 기반으로 한 JavaScript 3D 라이브러리로, 웹 브라우저에서 3D 그래픽을 구현할 수 있도록 돕습니다. 주요 개념은 다음과 같습니다.
- 장면(Scene): 3D 오브젝트와 빛을 배치하는 공간
- 카메라(Camera): 사용자가 장면을 어떤 시점에서 바라볼지 결정
- 렌더러(Renderer): 장면을 화면에 그려주는 역할
- 메시(Mesh): 3D 오브젝트를 구성하는 요소 (기하구조 + 재질)
- 조명(Light): 오브젝트의 명암과 그림자를 표현
이러한 요소를 조합하여 브라우저에서 동적인 3D 그래픽을 구현할 수 있습니다.
2. Three.js 환경 설정과 기본 코드
Three.js를 사용하려면 먼저 라이브러리를 불러와야 합니다.
<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js>"></script>
이제 기본적인 3D 장면을 생성하는 코드를 살펴보겠습니다.
// 1. 장면(Scene) 생성
const scene = new THREE.Scene();
// 2. 카메라(Camera) 설정 (원근 카메라)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 3. 렌더러(Renderer) 설정
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. 기본 오브젝트 생성 (큐브)
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 5. 애니메이션 루프
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
이 코드로 기본적인 3D 공간을 만들고, 회전하는 큐브를 화면에 표시할 수 있습니다.
3. 간단한 3D 웹사이트 모델링 적용 방법
Three.js에서는 직접 기하학을 만들 수도 있지만, 외부 3D 모델을 불러와 사용할 수도 있습니다.
가장 많이 사용되는 모델 포맷은 GLTF 또는 GLB입니다.
3D 모델 불러오기
Three.js에는 GLTFLoader가 포함되어 있어, 3D 모델을 쉽게 로드할 수 있습니다.
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 1. GLTF 로더 생성
const loader = new GLTFLoader();
// 2. 3D 모델 로드
loader.load('model.gltf', function(gltf) {
const model = gltf.scene;
scene.add(model);
model.position.set(0, 0, 0);
}, undefined, function(error) {
console.error('모델 로드 실패', error);
});
위 코드를 실행하면 model.gltf 파일을 불러와 Three.js 장면에 추가할 수 있습니다.
조명 추가
모델을 좀 더 현실감 있게 표현하려면 조명을 추가해야 합니다.
const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 5, 5).normalize(); scene.add(light);
이제 3D 모델이 빛을 받아 입체적으로 표현됩니다.
| 개념 | 설명 |
|---|---|
| 기본 요소 | 장면, 카메라, 렌더러, 메시, 조명 |
| 환경 설정 | Three.js 라이브러리 불러오기 |
| 기본 모델 | 큐브, 구, 평면 등 기본 오브젝트 생성 |
| 외부 모델 | GLTF, GLB 파일 로드 가능 |
| 조명 효과 | DirectionalLight, PointLight 등 활용 |
Three.js는 비교적 단순한 코드로도 3D 웹사이트를 구현할 수 있는 강력한 라이브러리입니다.
처음에는 기본 도형을 활용하고, 이후 3D 모델과 조명을 추가하며 점진적으로 기능을 확장해 나가는 것이 좋습니다.
이제 Three.js를 활용해 몰입감 있는 3D 웹사이트를 직접 만들어보세요!
