[javascript] Three.js를 이용한 데이터 시각화

29 Nov 2023

javascript

소개

Three.js는 웹 브라우저에서 3D 그래픽을 생성하고 다루기 위한 JavaScript 라이브러리입니다. 데이터 시각화 분야에서도 많이 사용되며, 사용자가 다양한 형태로 데이터를 시각화할 수 있습니다. 이번 글에서는 Three.js를 사용하여 데이터를 시각화하는 방법을 소개하겠습니다.

Three.js 설치하기

Three.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 웹 프로젝트에 추가해야 합니다. 다음 명령어를 사용하여 Three.js를 설치합니다.

npm install three

또는 CDN을 이용하여 Three.js를 가져올 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>

Three.js로 데이터 시각화하기

Three.js를 이용하여 데이터를 시각화하기 위해서는 몇 가지 단계를 거쳐야 합니다.

Scene(장면) 만들기: Three.js에서는 모든 객체를 Scene에 추가하여 그래픽을 구성합니다. Scene을 생성하려면 다음과 같이 코드를 작성합니다.
```
const scene = new THREE.Scene();
```
Camera(카메라) 설정하기: 시각화를 위한 카메라를 생성하고 적절한 위치와 방향을 설정합니다. 일반적으로 원근 투영(perspective projection) 카메라를 사용합니다.
```
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
```

Renderer(렌더러) 생성하기: Three.js에서는 WebGLRenderer를 사용하여 그래픽을 렌더링합니다.

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

Geometry(지오메트리) 생성하기: 데이터를 시각화하기 위해서는 지오메트리를 생성해야 합니다. 예를 들어, 원(CircleGeometry) 또는 박스(BoxGeometry)와 같은 기본 형태를 사용할 수 있습니다.
```
const geometry = new THREE.BoxGeometry(1, 1, 1);
```
Material(재질) 설정하기: 지오메트리에 적용할 재질을 지정합니다. 색상, 질감, 광택 등을 설정할 수 있습니다.
```
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
```
Mesh(메쉬) 만들기: 지오메트리와 재질을 결합하여 메쉬를 생성합니다. 메쉬는 Scene에 추가하여 그래픽을 표현합니다.
```
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
```
애니메이션 루프 구현하기: 애니메이션 효과를 위해 애니메이션 루프를 구현합니다. 기본적으로 requestAnimationFrame을 사용하여 애니메이션을 업데이트합니다.
```
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
```

마무리

이번 글에서는 Three.js를 사용하여 데이터를 시각화하는 방법을 살펴보았습니다. 코드를 실행해보면 데이터가 포함된 3D 그래픽을 웹 브라우저에서 볼 수 있습니다. Three.js는 강력한 인터랙션 및 애니메이션 기능을 제공하므로, 다양한 종류의 데이터 시각화에 유용하게 사용될 수 있습니다.

더 자세한 정보는 Three.js 공식 문서를 참조하시기 바랍니다.