[javascript] Three.js를 사용하여 웹에서의 3D 맞춤형 응용 프로그램 개발

29 Nov 2023

javascript

이제 웹에서 3D 그래픽을 구현하는 것이 점점 더 일상적인 일이 되어갑니다. Three.js는 웹 개발자들이 간단하고 효율적으로 3D 그래픽을 개발할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 WebGL을 직접 다루는 복잡한 작업을 피하고, 직관적인 인터페이스를 통해 3D 시각화를 구현할 수 있습니다.

Three.js란?

Three.js는 WebGL을 이용하여 웹에서 3D 그래픽을 표현하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 3D 모델링, 조명, 애니메이션 등의 기능을 제공하여 웹에서의 3D 시각화 개발을 쉽고 효율적으로 할 수 있도록 도와줍니다. Three.js는 크로스 플랫폼이며, 다양한 브라우저와 디바이스에서 동작합니다.

Three.js를 사용하여 3D 맞춤형 응용 프로그램 개발하기

Three.js를 사용하여 웹에서 맞춤형 3D 응용 프로그램을 개발하는 과정을 살펴보겠습니다.

1. Three.js 라이브러리 추가하기

우선 Three.js 라이브러리를 프로젝트에 추가해야 합니다. 이를 위해 다음과 같이 HTML 파일의 <head> 태그 내에 다음 코드를 추가합니다:

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

2. Scene 생성하기

Three.js에서는 모든 요소들을 담을 Scene을 생성해야 합니다. Scene은 3D 세계를 의미하며, 모든 객체들을 추가하고 관리하는 역할을 합니다. 다음과 같이 Scene을 생성합니다:

const scene = new THREE.Scene();

3. Camera 생성하기

3D 그래픽을 표시하기 위해 Camera를 생성해야 합니다. Camera는 사용자의 시점을 나타내는 역할을 합니다. 다양한 타입의 카메라 중에서 PerspectiveCamera를 가장 많이 사용합니다. PerspectiveCamera는 원근감을 가진 시야를 제공합니다. 다음과 같이 PerspectiveCamera를 생성합니다:

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

4. Renderer 생성하기

Renderer는 실제로 Scene과 Camera를 통해 3D 그래픽을 렌더링하는 역할을 합니다. HTML의 <canvas> 요소를 사용하여 Renderer를 초기화할 수 있습니다. 다음과 같이 Renderer를 생성합니다:

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });

5. Geometry와 Material 설정하기

Geometry는 3D 객체를 정의하는데 사용되는 데이터 구조입니다. Material은 Geometry의 외관을 나타내며, 객체에 적용되는 표면 속성을 정의합니다. 각각의 객체에 알맞는 Geometry와 Material을 설정해야 합니다.

6. Mesh 생성하기

Mesh는 Geometry와 Material을 결합하여 실제로 3D 객체를 생성하는 역할을 합니다. 다음과 같이 Mesh를 생성합니다:

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

7. Animation Loop 구현하기

Three.js에서는 애니메이션을 구현하기 위해 Animation Loop을 사용합니다. Animation Loop은 매 프레임마다 갱신되어야 할 작업을 수행하는 역할을 합니다. 다음과 같이 Animation Loop을 구현합니다:

function animate() {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
}

animate();

8. 이벤트 처리하기

마우스나 키보드 등의 이벤트를 처리하기 위해 Three.js에서는 크기가 변하는 동안 카메라의 비율을 조정하거나, 오브젝트의 동작을 변경하는 등의 작업을 수행해야 합니다.

위의 단계들을 따라가면 웹에서 맞춤형 3D 응용 프로그램을 개발할 수 있습니다. Three.js는 다양한 객체, 조명, 그림자 등의 기능을 제공하므로 웹에서 3D 그래픽을 자유롭게 구현할 수 있는 많은 옵션이 있습니다.

더 자세한 내용은 Three.js 공식 문서를 참고하시기 바랍니다.