[javascript] Three.js를 사용하여 웹에서의 3D 예술 작품 제작

29 Nov 2023

javascript

Three.js는 웹에서 3D 그래픽을 생성하고 조작하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 브라우저에서 3D 예술 작품을 만들 수 있습니다. 이번 글에서는 Three.js를 사용하여 웹에서 3D 예술 작품을 만드는 방법을 알아보겠습니다.

1. Three.js 설치 및 설정

먼저, Three.js를 사용하기 위해 프로젝트에 Three.js를 설치해야 합니다. npm을 사용한다면 아래 명령을 실행하여 Three.js를 설치합니다.

npm install three

이제 프로젝트에서 Three.js를 사용할 수 있습니다. HTML 파일에 Three.js를 추가하려면 아래와 같이 script 태그를 사용합니다.

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

2. Three.js로 3D 씬 생성하기

Three.js에서 3D 씬을 생성하려면 Scene 객체를 생성해야 합니다. 아래 코드 예제를 참고하세요.

// Scene 생성
const scene = new THREE.Scene();

3. 3D 오브젝트 추가하기

3D 예술 작품을 만들기 위해 오브젝트를 3D 씬에 추가해야 합니다. Three.js에서는 다양한 종류의 오브젝트를 제공합니다. 아래 코드 예제는 3D 큐브를 생성하고, 씬에 추가하는 예제입니다.

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

4. 렌더링하기

Three.js에서는 렌더러를 사용하여 3D 씬을 렌더링합니다. 먼저 렌더러를 생성하고, 씬과 카메라를 설정해야 합니다. 아래 코드 예제는 WebGLRenderer를 사용하여 씬을 렌더링하는 방법을 보여줍니다.

// 렌더러 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 카메라 생성
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 렌더링
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5. 추가 기능 탐구

Three.js에는 더 다양한 기능과 쉐이더, 텍스처 등을 활용하여 3D 예술 작품을 제작할 수 있습니다. Three.js 문서와 예제들을 참고하여 원하는 기능을 탐구해보세요.

6. 결론

이번 글에서는 Three.js를 사용하여 웹에서의 3D 예술 작품 제작 방법을 소개했습니다. Three.js를 통해 브라우저에서 직관적이고 멋진 3D 그래픽을 만들 수 있습니다. Three.js의 다양한 기능과 예제들을 살펴보고, 웹에서 창작의 가능성을 확장해보세요.