[javascript] Three.js를 사용하여 웹 기반 3D 인터랙티브 제작

29 Nov 2023

javascript

Three.js는 웹 브라우저에서 3D 그래픽을 만들기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 기반에서 간단하고 인터랙티브한 3D 모델을 만들 수 있습니다. 이번 포스트에서는 Three.js를 사용하여 웹 기반 3D 인터랙티브를 제작하는 방법에 대해 알아보겠습니다.

Three.js 설치

가장 먼저 Three.js를 설치해야 합니다. Three.js는 CDN을 통해 손쉽게 설치할 수 있습니다. 아래의 코드를 <head> 태그 내에 추가하여 Three.js를 사용할 준비를 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

Three.js 기본 구조

Three.js를 사용하여 3D 인터랙티브를 제작하기 위해 기본적인 구조를 정의해야 합니다. 간단한 구조로 시작하기 위해 scene, renderer, 그리고 camera를 설정합니다.

// scene 생성
const scene = new THREE.Scene();

// renderer 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// camera 생성
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

3D 객체 만들기

이제 Three.js를 사용하여 3D 객체를 만들어 보겠습니다. 예를 들어, 큐브를 생성하고 씬에 추가해 보겠습니다.

// 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

카메라 위치 설정하기

카메라의 위치를 설정하여 원하는 시점에서 3D 객체를 볼 수 있도록 합니다.

camera.position.z = 5;

애니메이션 추가하기

Three.js는 애니메이션을 만들기 위한 강력한 도구를 제공합니다. requestAnimationFrame을 사용하여 애니메이션을 추가해 보겠습니다.

function animate() {
  requestAnimationFrame(animate);

  // 큐브 회전시키기
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

마치며

이제 Three.js를 사용하여 웹 기반 3D 인터랙티브를 제작하는 간단한 예제를 살펴보았습니다. Three.js는 강력하고 다양한 기능을 제공하여 더욱 복잡하고 흥미로운 3D 애플리케이션을 만들 수 있습니다. 직접 실험해보며 Three.js를 익혀보세요!

참고 자료

Three.js 공식 문서: https://threejs.org/docs/
Three.js GitHub 저장소: https://github.com/mrdoob/three.js