[javascript] Three.js를 이용한 3D 모델링

29 Nov 2023

javascript

Three.js는 웹 기반 3D 그래픽을 구현하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 3D 모델을 만들고 조작할 수 있습니다. 이번 포스트에서는 Three.js를 사용하여 간단한 3D 모델을 생성하는 방법에 대해 알아보도록 하겠습니다.

Three.js 설치하기

Three.js를 사용하기 위해서는 먼저 Three.js 라이브러리 파일을 다운로드하고 HTML 문서에 추가해야 합니다. Three.js의 공식 웹사이트(https://threejs.org/)에서 최신 버전의 라이브러리 파일을 다운로드할 수 있습니다. 다운로드한 파일을 원하는 경로에 추가하고, HTML 문서 내에서 <script> 태그를 사용하여 라이브러리를 불러옵니다.

<script src="path/to/three.js"></script>

3D 씬 생성하기

Three.js를 사용하여 3D 모델을 생성하려면 먼저 3D 씬(장면)을 생성해야 합니다. 씬은 3D 공간을 나타내며, 모든 3D 오브젝트는 씬에 추가됩니다. 씬을 생성하려면 다음과 같이 코드를 작성합니다.

var scene = new THREE.Scene();

카메라 생성하기

3D 모델을 보기 위해서는 카메라가 필요합니다. Three.js에서는 다양한 종류의 카메라를 사용할 수 있으며, 가장 일반적으로 사용되는 PerspectiveCamera를 사용하도록 하겠습니다.

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

3D 오브젝트 생성하기

이제 3D 오브젝트를 생성하고 씬에 추가해보겠습니다. Three.js에서는 다양한 형태의 고정된 기하체(geometric shapes)가 미리 제공되며, 이를 사용하여 쉽게 3D 모델을 만들 수 있습니다. 예를 들어, 정육면체(cube)를 생성하고 씬에 추가하는 코드는 다음과 같습니다.

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

조명 추가하기

3D 모델을 더욱 생동감 있게 만들기 위해 조명을 추가할 수 있습니다. Three.js에서는 다양한 종류의 조명을 사용할 수 있습니다. 예를 들어, AmbientLight(환경광)와 PointLight(점광원)을 추가하는 코드는 다음과 같습니다.

var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

렌더링하기

마지막으로, Three.js를 사용하여 생성한 3D 모델을 렌더링하여 웹 페이지에 보여주어야 합니다. 이를 위해 렌더러(renderer)를 생성하고, 카메라를 특정 위치로 이동한 뒤, 렌더러에 씬과 카메라를 넘겨주는 코드를 작성합니다.

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

camera.position.z = 5;

function animate() {
   requestAnimationFrame(animate);
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
   renderer.render(scene, camera);
}

animate();

위의 코드는 Three.js를 사용하여 3D 모델을 만들고 렌더링하기 위한 최소한의 코드입니다. 이제 웹 브라우저에서 HTML 문서를 열어서 3D 모델이 제대로 보이는지 확인해보세요.

이외에도 Three.js는 다양한 기능과 확장성을 제공하며, 강력한 3D 그래픽을 웹에서 구현할 수 있도록 도와줍니다. 관련 자세한 내용은 Three.js 공식 문서를 참고하시기 바랍니다.

참고 자료

Three.js 공식 웹사이트: https://threejs.org/
Three.js GitHub 리포지토리: https://github.com/mrdoob/three.js/