[javascript] Three.js를 사용하여 웹에서의 3D 프린팅 모델 뷰어 개발

29 Nov 2023

javascript

웹에서의 3D 모델 뷰어를 개발하는 것은 최신 웹 기술의 흥미로운 활용 사례 중 하나입니다. 이번에는 Three.js를 사용하여 웹에서 3D 프린팅 모델 뷰어를 개발하는 방법을 살펴보겠습니다.

Three.js란?

Three.js는 웹에서 3D 그래픽을 구현하기 위한 JavaScript 라이브러리입니다. WebGL을 기반으로 동작하며, 다양한 3D 객체를 생성하고 조작할 수 있습니다. Three.js는 강력하면서도 사용하기 쉬운 API를 제공하여 개발자들에게 편리한 3D 그래픽 개발 경험을 제공합니다.

3D 프린팅 모델 뷰어 개발하기

1. Three.js 설치하기

Three.js를 사용하기 위해 먼저 프로젝트에 Three.js를 설치해야 합니다. NPM을 사용하는 경우 다음 명령을 실행하여 Three.js를 설치합니다.

npm install three

2. HTML 구조 설정하기

3D 프린팅 모델을 보여주기 위해 HTML 파일을 작성합니다. 기본적으로 Three.js의 뷰어는 HTML에서 Canvas 요소를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Printer Model Viewer</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script src="path-to/three.js"></script>
    <script src="path-to/main.js"></script>
</body>
</html>

3. JavaScript 코드 작성하기

main.js 파일에 Three.js를 사용하여 3D 프린팅 모델을 로드하고 보여주는 코드를 작성합니다.

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

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

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

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

// 렌더링 함수 정의
function animate() {
    requestAnimationFrame(animate);

    // 모델 회전
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

// 렌더링 시작
animate();

위 코드는 간단한 예제로 큐브를 생성하고 회전시키는 것을 보여줍니다. 실제로는 .obj나 .gltf 같은 3D 모델 파일을 로드하여 보여줄 수 있습니다.

결론

Three.js를 사용하여 웹에서 3D 프린팅 모델 뷰어를 개발하는 방법에 대해 알아보았습니다. Three.js는 강력한 3D 그래픽 라이브러리로 다양한 기능을 제공하므로, 웹 애플리케이션에서 3D 모델을 보여주는 경우에 유용하게 활용할 수 있습니다. 자세한 내용은 Three.js 공식 문서를 참고하시기 바랍니다.