소개

3D 공공 예술 설치 작품은 현대 미술의 한 분야로써 예술 작품을 통해 공공 공간을 가꾸고 시민들에게 문화적인 경험을 제공합니다. 최근에는 웹 기술의 발전으로 인해 이러한 작품을 웹에서도 구현할 수 있게 되었습니다. 이번 포스트에서는 Three.js를 활용하여 웹에서 3D 공공 예술 설치 작품을 개발하는 방법을 알아보겠습니다.

Three.js란?

Three.js는 웹에서 3D 그래픽을 제작하는 데 사용되는 JavaScript 라이브러리입니다. WebGL을 기반으로 하며, 다양한 브라우저와 플랫폼에서 동작합니다. Three.js를 사용하면 쉽게 3D 오브젝트를 생성하고 조작할 수 있으며, 재질과 빛 등을 추가해 시각적 효과를 부여할 수 있습니다.

개발 준비하기

Three.js를 사용하여 웹에서 3D 공공 예술 설치 작품을 개발하기 위해서는 다음과 같은 준비가 필요합니다.

1. HTML 파일 생성하기: Three.js를 사용할 HTML 파일을 생성합니다.
2. Three.js 라이브러리 추가하기: Three.js의 최신 버전을 다운로드하고 HTML 파일에 추가합니다.
3. Canvas 요소 추가하기: 3D 그래픽을 렌더링할 Canvas 요소를 HTML 파일에 추가합니다.

Three.js로 3D 모델 생성하기

Three.js를 사용하여 3D 모델을 생성하는 과정은 다음과 같습니다.

1. Scene 생성하기: Scene은 모든 3D 오브젝트를 담는 컨테이너입니다.
2. Camera 설정하기: Camera는 3D 공간에서 어떤 시점에서 오브젝트를 보고 있는지를 정의합니다.
3. Renderer 생성하기: Renderer는 3D 그래픽을 렌더링하는 역할을 합니다.
4. Geometry 생성하기: Geometry는 오브젝트의 형태와 구조를 정의합니다.
5. Material 설정하기: Material은 오브젝트에 적용할 표면 속성을 정의합니다.
6. Mesh 생성하기: Mesh는 Geometry와 Material을 결합한 결과물로, 실제로 3D 모델을 구성합니다.
7. 추가 작업하기: 조명, 그림자, 움직임 등 추가적인 작업을 수행할 수 있습니다.

import * as THREE from 'three';

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);

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

camera.position.z = 5;

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 공식 문서를 참고하시기 바랍니다. Happy coding!