Three.js는 JavaScript로 작성된 3D 그래픽을 생성하고 조작하기 위한 오픈 소스 라이브러리입니다. 이번 기술 블로그에서는 Three.js를 사용하여 웹 프로토 타이핑을 개발하는 방법에 대해 알아보겠습니다.
1. Three.js 설치
Three.js를 사용하기 위해서는 우선 Three.js 라이브러리를 다운로드하고 웹 페이지에 추가해야 합니다. 아래의 CDN 링크를 사용하여 Three.js를 손쉽게 추가할 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
위의 코드를 HTML 파일의 <head> 태그 안에 추가하면 Three.js가 로드되어 사용할 수 있습니다.
2. 3D 씬 생성하기
Three.js를 사용하여 3D 그래픽을 생성하려면 씬(Scene), 카메라(Camera), 그리고 렌더러(Renderer)를 생성해야 합니다. 아래의 코드는 기본적인 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);
// 애니메이션 함수 정의하기
function animate() {
requestAnimationFrame(animate);
// 씬 업데이트하기
renderer.render(scene, camera);
}
// 애니메이션 시작하기
animate();
위의 코드를 HTML 파일의 <script> 태그 안에 추가하면 Three.js로 생성된 3D 그래픽이 웹 페이지에서 보여집니다.
3. 3D 객체 생성하기
Three.js를 사용하여 3D 객체를 생성하려면 기본적으로 기하학적 모양인 Geometry와 표면 특성인 Material을 결합하여 Mesh를 만들어야 합니다. 아래의 코드는 기본적인 3D 객체 생성하는 예제입니다.
// Geometry 생성하기
const geometry = new THREE.BoxGeometry();
// Material 생성하기
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Mesh 생성하기
const cube = new THREE.Mesh(geometry, material);
// 3D 씬에 Mesh 추가하기
scene.add(cube);
위의 코드에서는 BoxGeometry와 MeshBasicMaterial을 사용하여 정육면체를 생성하고, 이를 3D 씬에 추가합니다. 원하는 모양과 재질에 따라 다양한 객체를 생성할 수 있습니다.
4. 다양한 효과 추가하기
Three.js를 사용하여 3D 그래픽에 다양한 효과를 추가할 수 있습니다. 예를 들어, 빛과 그림자, 텍스처 등을 추가하여 더욱 뚜렷한 3D 경험을 제공할 수 있습니다.
// 빛 생성하기
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(0, 0, 5);
scene.add(light);
// 텍스처 로드하기
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
// Material에 텍스처 추가하기
const material = new THREE.MeshBasicMaterial({ map: texture });
// 그림자 활성화하기
renderer.shadowMap.enabled = true;
// 텍스처 적용된 3D 객체 생성하기
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshLambertMaterial({ map: texture });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
scene.add(sphere);
위의 코드는 빛과 그림자 효과를 추가하고, 이미지 텍스처를 적용하는 예제입니다. 이 외에도 Three.js는 많은 효과를 제공하므로 필요한 효과를 선택하여 사용할 수 있습니다.
결론
이번 기술 블로그에서는 Three.js를 사용하여 웹 프로토 타이핑을 개발하는 방법에 대해 알아보았습니다. Three.js는 강력한 3D 그래픽 라이브러리로 다양한 기능과 효과를 제공합니다. 웹 개발 프로젝트에 3D 그래픽을 추가하고 싶다면 Three.js를 사용해보세요!