[javascript] Three.js를 사용하여 웹에서의 3D 애니메이션 구현

29 Nov 2023

javascript

Three.js는 JavaScript 기반의 3D 그래픽 라이브러리로, 웹 환경에서 3D 애니메이션을 구현하기 위해 많이 사용됩니다. 이 라이브러리를 사용하면 간단하게 웹 페이지에서 3D 모델을 만들고 애니메이션을 추가할 수 있습니다.

Three.js 설치

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://threejs.org/build/three.js"></script>
  <script>
    // Three.js를 이용한 3D 애니메이션 구현 코드를 작성합니다.
  </script>
</body>
</html>

위의 코드에서는 <script> 태그로 Three.js 라이브러리를 import하고, <script> 태그 내부에 3D 애니메이션을 구현할 코드를 작성하면 됩니다.

3D 객체 생성 및 애니메이션 추가

Three.js를 사용하여 3D 객체를 생성하고 애니메이션을 추가하는 방법을 알아보겠습니다.

// Three.js 초기화
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 3D 객체 생성
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();

위의 코드에서는 Three.js를 초기화하고, 3D 객체를 생성한 후 애니메이션을 추가하는 과정을 보여줍니다. 새로운 THREE.Scene, THREE.PerspectiveCamera, THREE.WebGLRenderer 객체를 생성하여 화면에 그려줄 렌더링 영역을 설정하고, 3D 객체인 THREE.Mesh를 생성하여 씬에 추가합니다. 마지막으로 requestAnimationFrame을 사용하여 애니메이션을 구현하고 renderer.render를 호출하여 씬과 카메라를 렌더링합니다.

결론

Three.js는 강력한 3D 그래픽 라이브러리로 웹에서 멋진 3D 애니메이션을 구현하는 데 사용됩니다. 이번 글에서는 Three.js의 기본적인 사용법과 3D 객체 생성 및 애니메이션 추가하는 방법에 대해 알아보았습니다. Three.js에는 다양한 기능과 옵션이 있으므로 자세한 내용은 공식 문서를 참조하는 것이 좋습니다.

참고: