[javascript] Three.js를 이용한 지리적 정보 시각화

29 Nov 2023

javascript

Three.js는 웹 브라우저에서 3D 그래픽을 생성하고 조작하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹에서 지리적 정보를 시각화하는 멋진 3D 시각화를 만들 수 있습니다. 이 글에서는 Three.js를 사용하여 지리적 정보를 시각화하는 간단한 예제를 소개하겠습니다.

Three.js 설치

Three.js를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음과 같이 npm을 사용하여 Three.js를 설치할 수 있습니다.

npm install three

HTML 구조 설정

시각화를 위해 HTML 구조를 설정해야 합니다. 다음과 같은 구조를 가진 HTML 파일을 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>지리적 정보 시각화</title>
    <style>
      body { margin: 0; }
      #canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <script src="main.js"></script>
  </body>
</html>

JavaScript 코드 작성

main.js 파일을 생성하고 다음과 같이 Three.js 코드를 작성합니다.

import * as THREE from 'three';

// 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.getElementById('canvas').appendChild(renderer.domElement);

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

// animation 함수
function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}
animate();

실행

이제 HTML 파일을 브라우저로 열면 Three.js를 이용한 3D 박스가 화면에 나타납니다. 지리적 정보를 시각화하려면 위 코드의 cube 객체를 실제 지리적 데이터로 대체하면 됩니다.

더 많은 Three.js 기능을 활용하여 지리적 정보를 시각화할 수 있습니다. Three.js의 공식 문서와 예제들을 참고하면 다양한 시각화 방법을 배울 수 있습니다.

결론

Three.js를 사용하여 지리적 정보를 시각화하는 방법을 알아보았습니다. Three.js를 사용하면 웹 브라우저에서 멋진 3D 시각화를 구현할 수 있으며, 지리적 데이터를 시각화하는 데도 활용할 수 있습니다. 다양한 기능과 예제들을 살펴보면서 더욱 다양하고 인상적인 시각화를 개발해보시길 바랍니다.