[javascript] Three.js를 사용하여 웹에서의 3D 데이터 시각화 구현

29 Nov 2023

javascript

소개

웹에서 3D 데이터 시각화는 사용자가 3D 공간에서 데이터를 살펴보고 상호 작용할 수 있는 효과적인 방법입니다. Three.js는 JavaScript 기반의 3D 그래픽 라이브러리로, 웹 브라우저에서 3D 시각화를 구현하는 데 사용됩니다. 이 블로그 포스트에서는 Three.js를 사용하여 웹에서 3D 데이터 시각화를 구현하는 방법에 대해 알아보겠습니다.

1. Three.js 라이브러리 불러오기

Three.js를 사용하기 위해 먼저 Three.js 라이브러리를 HTML 문서에 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Three.js 라이브러리를 불러올 수 있습니다.

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

2. 3D 장면(Scene) 생성하기

Three.js에서는 3D 장면을 생성하여 그래픽 객체를 추가합니다. 먼저 THREE.Scene 클래스의 객체를 생성하고, THREE.WebGLRenderer 클래스를 사용하여 3D 장면을 렌더링할 요소를 생성합니다. 다음 코드는 3D 장면과 렌더링 요소를 생성하는 예제입니다.

// 3D 장면 생성
var scene = new THREE.Scene();

// 렌더링 요소 생성
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 3D 객체 추가하기

3D 장면에 3D 객체를 추가하여 데이터를 시각화할 수 있습니다. 예를 들어, Three.js에서 제공하는 기본적인 도형(예: 정육면체, 구, 원통 등)을 생성하여 3D 장면에 추가할 수 있습니다. 다음 코드는 정육면체를 생성하고 3D 장면에 추가하는 예제입니다.

// 정육면체 생성
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);

// 3D 장면에 정육면체 추가
scene.add(cube);

4. 렌더링과 애니메이션

Three.js에서는 렌더링을 직접 호출해야 3D 장면이 화면에 표시됩니다. 이를 위해 requestAnimationFrame을 사용하여 애니메이션 프레임마다 렌더링 함수를 호출할 수 있습니다. 다음 코드는 렌더링 함수를 정의하고 애니메이션을 시작하는 예제입니다.

function animate() {
  requestAnimationFrame(animate);

  // 장면 렌더링
  renderer.render(scene, camera);
}

// 애니메이션 시작
animate();

결론

이제 Three.js를 사용하여 웹에서 3D 데이터 시각화를 구현하는 기본적인 단계들에 대해 알아보았습니다. Three.js의 다양한 기능과 활용법을 익히면 보다 복잡하고 효과적인 3D 데이터 시각화를 구현할 수 있습니다. Three.js 공식 문서와 예제 코드를 참고하여 보다 심화된 기능을 익히기를 권장합니다.

참고 자료

Three.js 공식 문서: https://threejs.org/docs/
Three.js 예제 코드: https://threejs.org/examples/