[javascript] Three.js의 사용 예시

29 Nov 2023

javascript

Three.js는 웹 기반 3D 그래픽을 구현하기 위한 JavaScript 라이브러리입니다. 이번에는 Three.js를 사용하여 간단한 3D 장면을 만드는 예시를 살펴보겠습니다.

HTML 구조

먼저, HTML 구조를 설정합니다. Three.js를 사용하기 위해 CDN을 이용하여 Three.js 라이브러리를 가져옵니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Three.js Example</title>
    <style>
      body { margin: 0; }
      canvas { display: block; }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

JavaScript 코드

이제, 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);

// geometry 생성
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();

실행 결과 확인하기

위의 코드를 main.js 파일로 저장하고 HTML 파일을 실행하면, 회전하는 정육면체가 나타나는 3D 장면이 생성됩니다. 회전 속도를 조절하거나 다른 도형을 추가하여 더 복잡한 3D 장면을 만들 수도 있습니다.

보다 자세한 예시와 Three.js의 다른 기능들은 공식 문서를 참고하시기 바랍니다.

이처럼 Three.js를 사용하면 웹 페이지에서 간편하게 3D 그래픽을 구현할 수 있습니다. 다양한 예시와 자료를 참고하여 보다 복잡하고 재미있는 3D 장면을 만들어보세요!