[javascript] Three.js를 사용하여 웹에서의 3D 프로토타입 개발

29 Nov 2023

javascript

웹 개발에서 3D 그래픽을 구현하기 위해 Three.js를 사용하는 것은 점점 더 일반적인 방법이 되어가고 있습니다. Three.js는 JavaScript 기반의 3D 라이브러리로, 브라우저에서 3D 객체를 만들고 조작할 수 있게 해줍니다. Three.js를 사용하면 애니메이션, 조명, 텍스처 등 다양한 3D 요소를 웹에서 구현할 수 있습니다.

Three.js 설치

Three.js를 사용하기 위해서는 먼저 Three.js를 다운로드하고 프로젝트에 포함해야 합니다. CDN을 통해 Three.js를 가져오거나 로컬에 패키지를 설치하여 사용할 수 있습니다.

CDN을 통한 설치:

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

로컬 설치:

npm install three

기본 구성 요소

Three.js를 사용하여 웹에서 3D 그래픽을 만들기 위해서는 몇 가지 기본 구성 요소를 알아야 합니다.

Scene (장면)

장면은 모든 3D 객체가 배치되는 곳입니다. Three.js에서는 THREE.Scene 클래스를 사용하여 장면을 생성할 수 있습니다.

const scene = new THREE.Scene();

Camera (카메라)

카메라는 장면을 보는 관점을 정의합니다. Three.js에서는 THREE.PerspectiveCamera 클래스를 사용하여 원근 카메라를 생성할 수 있습니다. 카메라는 위치, 시선, 초점 등의 속성을 가지고 있습니다.

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

Renderer (렌더러)

렌더러는 장면을 그리는 역할을 합니다. Three.js에서는 THREE.WebGLRenderer 클래스를 사용하여 WebGL을 기반으로 한 렌더링을 수행할 수 있습니다. 렌더러는 화면 크기, 배경색, 그림자 등의 설정을 할 수 있습니다.

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

Geometry (기하학적 모델)

기하학적 모델은 3D 객체의 형태를 정의합니다. Three.js에서는 다양한 기하학적 모델을 제공하며, 필요에 따라 사용할 수 있습니다.

const geometry = new THREE.BoxGeometry(1, 1, 1);

Material (재질)

재질은 객체의 색상, 질감, 광택 등을 정의합니다. Three.js에서는 다양한 종류의 재질을 제공하며, 필요에 따라 사용할 수 있습니다.

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Mesh (메쉬)

메쉬는 기하학적 모델과 재질을 결합한 최종 객체입니다. Three.js에서는 THREE.Mesh 클래스를 사용하여 메쉬를 생성할 수 있습니다. 메쉬는 기하학적 모델과 재질을 인자로 받습니다.

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

애니메이션

Three.js를 사용하여 웹에서 3D 애니메이션을 만들 수도 있습니다. 애니메이션을 적용하기 위해서는 각 프레임마다 씬을 업데이트하는 render 함수를 작성해야 합니다.

function render() {
  requestAnimationFrame(render);

  // 애니메이션 로직 작성
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 장면을 그림
  renderer.render(scene, camera);
}

render();

결론

Three.js를 사용하여 웹에서의 3D 프로토타입을 개발하는 방법에 대해 알아보았습니다. Three.js는 간편한 API와 다양한 기능을 제공하여 웹 개발자들이 손쉽게 3D 그래픽을 구현할 수 있도록 도와줍니다. 자세한 사용법은 Three.js 공식 문서를 참조하시기 바랍니다.