Three.js는 웹 브라우저에서 3D 그래픽을 생성하기 위한 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. WebGL 위에 구축되어 있으며, 저수준 WebGL을 배울 필요 없이 웹 브라우저에서 애니메이션 3D 컴퓨터 그래픽을 생성하고 표시하는 과정을 간소화합니다. 대화형 시각화, 게임 또는 몰입형 웹 경험을 만들고자 한다면, Three.js는 아이디어를 실현하는 데 필요한 도구를 제공합니다.
Three.js 개발에 들어가기 전에, API 테스트 요구사항을 위한 Postman 대안으로 Apidog를 사용해 보는 것을 고려해보세요. Apidog는 API 개발, 테스트 및 문서 작성을 위한 강력한 기능을 갖춘 직관적인 인터페이스를 제공합니다. 많은 사용자들이 Postman에서 불편한 기능 과부하 없이 사용할 수 있는 훌륭한 도우미 도구입니다.
자, 이제 Three.js로의 여정을 시작해 봅시다!
1. 환경 설정하기
설치
Three.js를 프로젝트에 포함하는 방법은 여러 가지가 있습니다:
옵션 1: npm 사용 (권장)
npm install three
그 다음, JavaScript 파일에 다음과 같이 가져옵니다:
import * as THREE from 'three';
옵션 2: CDN 사용
HTML 파일에 다음을 추가합니다:
<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
옵션 3: 다운로드 후 로컬 포함
라이브러리를 Three.js 웹사이트에서 다운로드하고 HTML에 포함시킵니다:
<script src="path/to/three.min.js"></script>
프로젝트 구조
기본 Three.js 프로젝트에 필요한 파일은:
project-folder/
├── index.html
├── style.css
└── script.js
당신의 index.html 파일은 다음과 같이 포함되어야 합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>내 Three.js 애플리케이션</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. 기본 개념 이해하기
Three.js는 이해해야 할 몇 가지 핵심 개념에 따라 작동합니다:
핵심 요소
- 장면: 모든 객체, 조명 및 카메라를 포함하는 컨테이너로 생각하세요.
- 카메라: 장면의 어떤 부분이 보이는지 정의합니다 (당신의 시점).
- 렌더러: 카메라가 보는 것을 화면에 그립니다.
- 객체(메시): 장면의 3D 객체로, 일반적으로 기하학과 재료로 구성됩니다.
- 조명: 장면의 조명 원천입니다.
첫 번째 장면 만들기
회전하는 큐브를 만드는 간단한 예제를 제공합니다:
// 장면 생성
const scene = new THREE.Scene();
// 카메라 생성
const camera = new THREE.PerspectiveCamera(
75, // 시야각
window.innerWidth / window.innerHeight, // 종횡비
0.1, // 가까운 절단면
1000 // 먼 절단면
);
camera.position.z = 5;
// 렌더러 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 애니메이션 루프
function animate() {
requestAnimationFrame(animate);
// 큐브 회전
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
3. 애플리케이션 반응형 만들기
Three.js 애플리케이션이 모든 장치에서 잘 보이게 하려면, 창 크기 변경을 처리해야 합니다:
// 창 크기 변경 처리
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
// 렌더러 업데이트
renderer.setSize(width, height);
// 카메라 업데이트
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
4. 재료 및 조명 추가하기
기본적인 장면은 시작일 뿐입니다. 재료와 조명으로 시각적 품질을 높여봅시다:
재료
// 반사형 표준 재료
const material = new THREE.MeshStandardMaterial({
color: 0x0088ff, // 파란색
roughness: 0.5, // 약간의 광택
metalness: 0.5, // 약간의 금속성
});
// 단순한 광택 표면을 위한 폰 재료
const phongMaterial = new THREE.MeshPhongMaterial({
color: 0xff0000, // 빨강색
shininess: 100, // 매우 광택
specular: 0x111111 // 반사광 색상
});
조명
// 환경광 추가
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 방향성 조명 추가 (태양과 같은)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 점광원 추가 (전구와 같은)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
5. 다양한 기하학 생성하기
Three.js에는 많은 내장 기하학이 포함되어 있습니다:
// 구
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);
// 원柱
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);
// 원환 (도넛)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);
6. Three.js에서 텍스트 생성하기
TextGeometry를 사용하여 장면에 텍스트를 추가할 수 있습니다:
// 먼저, 폰트 로드
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
font: font,
size: 0.5,
height: 0.1,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 5
});
const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
const text = new THREE.Mesh(textGeometry, textMaterial);
// 텍스트 중앙 정렬
textGeometry.computeBoundingBox();
const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
text.position.x = -textWidth / 2;
scene.add(text);
});
7. 선 그리기
Three.js에서 선을 생성하여 와이어프레임 또는 경로 시각화를 위한 작업을 수행할 수 있습니다:
// 선을 위한 포인트 생성
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));
// 선 기하학 생성
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
// 재료 생성
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
// 선 생성
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
8. 상호작용 및 제어
사용자가 3D 장면과 상호작용할 수 있도록 제어 기능을 추가할 수 있습니다:
// OrbitControls 가져오기
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 제어 기능 생성
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 부드러운 댐핑 효과 추가
controls.dampingFactor = 0.05;
// 애니메이션 루프 업데이트
function animate() {
requestAnimationFrame(animate);
// 제어 기능 업데이트
controls.update();
renderer.render(scene, camera);
}
9. 3D 모델 로딩하기
Blender와 같은 소프트웨어에서 생성된 모델을 가져올 수 있습니다:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
'path/to/model.gltf',
// 로드 완료 시 호출
function(gltf) {
scene.add(gltf.scene);
},
// 로딩 중 호출
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% 로드됨');
},
// 오류 발생 시 호출
function(error) {
console.error('오류 발생', error);
}
);
10. 디버깅 및 성능 팁
통계 패널
import Stats from 'three/examples/jsm/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
requestAnimationFrame(animate);
stats.begin();
// 애니메이션 코드 여기에 작성
stats.end();
renderer.render(scene, camera);
}
성능 팁
- Geometry 대신 BufferGeometry 사용 (더 이상 사용되지 않음)
- 가능한 한 재료와 기하학 재사용하기
- 보다 좋은 GPU 사용을 위해
renderer.powerPreference = 'high-performance'로 설정하기 - 카메라 시야 바깥쪽에 있는 객체를 숨기기 위해
Object3D.frustumCulled = true사용 - 모델 복잡성 최적화하기 (가능한 한 폴리곤 수 줄이기)
결론
이제 환경 설정부터 인터랙티브한 3D 장면 생성까지 Three.js의 기본을 배웠습니다. 이것은 시작일 뿐이며, Three.js는 놀라운 3D 웹 경험을 만드는 데 필요한 방대한 기능을 제공합니다.
지식을 심화하기 위해서는 공식 Three.js 문서와 예제 갤러리를 탐색해 보세요. 커뮤니티는 포럼 및 GitHub에서 활발하게 활동하며 모든 수준의 개발자를 위한 리소스와 지원을 제공합니다.
배우는 가장 좋은 방법은 실험해보는 것입니다. 간단한 프로젝트부터 시작하여 점차 복잡한 장면으로 발전해보세요. 연습과 인내가 있다면, 곧 인상적인 3D 웹 경험을 만드는 것이 가능할 것입니다!
Three.js와 함께하는 즐거운 코딩하세요!