Three.js는 JavaScript로 작성된 3D 그래픽 라이브러리로, 웹 브라우저에서 3D 월드를 만들고 제어할 수 있게 해줍니다. 이번 블로그에서는 Three.js를 사용하여 상호작용 가능한 3D 월드를 개발하는 방법에 대해 알아보겠습니다.

Three.js 시작하기

먼저 Three.js를 사용하기 위해 해당 라이브러리를 웹 페이지에 추가해야 합니다. 아래의 코드를 HTML 파일에 추가하여 Three.js를 불러올 수 있습니다.

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

이제 Three.js를 사용할 준비가 되었습니다!

3D 월드 생성하기

Three.js에서는 Scene 클래스를 사용하여 3D 월드를 생성합니다. 아래의 코드는 3D 월드를 생성하는 예제입니다.

const scene = new THREE.Scene();

3D 모델 추가하기

Three.js에서는 다양한 유형의 3D 모델을 추가할 수 있습니다. 예를 들어, 3D 모델을 추가하고 표면을 설정하는 방법을 살펴보겠습니다.

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

위의 코드에서는 BoxGeometry와 MeshBasicMaterial을 사용하여 사각형 모양의 3D 모델을 생성하고, 색상을 설정한 후 Scene에 추가하였습니다.

카메라와 렌더러 설정하기

Three.js에서는 카메라를 사용하여 3D 월드를 보여줍니다. 아래의 코드는 원근 투시법(perspective projection)을 사용하는 카메라를 생성하는 예제입니다.

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

애니메이션 추가하기

Three.js에서는 animate 함수를 사용하여 애니메이션 효과를 추가할 수 있습니다. 아래의 코드는 회전 애니메이션을 추가하는 예제입니다.

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

위의 코드에서 animate 함수는 재귀적으로 호출되며, 매 프레임마다 큐브 모델을 회전시키고 렌더링합니다.

마치며

이제 Three.js를 사용하여 상호작용 가능한 3D 월드를 개발하는 방법에 대해 알아보았습니다. Three.js를 사용하면 브라우저에서 멋진 3D 그래픽을 구현할 수 있습니다. 더 많은 기능과 예제는 Three.js 공식 문서를 참고해주세요.