Daddy Makers: Three.js 이용한 web3d 프로그램 개발하기

2024년 10월 7일 월요일

Three.js 이용한 web3d 프로그램 개발하기

이 글은 웹 기반 3D 그래픽 라이브러리로 거의 표준적으로 사용되고 있는 three.js를 간략히 소개한다. 아울러, 이를 이용한 web3d 프로그램 개발하는 방법을 간략히 정리한다.

three.js 예제

개요

Three.js는 웹 브라우저에서 3D 그래픽을 쉽게 만들고 렌더링할 수 있도록 도와주는 자바스크립트 라이브러리다. WebGL을 기반으로 작동하며, 복잡한 3D 그래픽 처리를 단순화해준다.

Scene (장면)
장면은 Three.js에서 3D 객체들이 배치되는 공간이다. 카메라, 조명, 메쉬와 같은 객체들이 장면에 추가되며, 이 장면을 렌더링하여 화면에 표시하게 된다.

Camera (카메라)
카메라는 장면을 바라보는 시점을 결정하는 객체다. Three.js에서 일반적으로 많이 사용하는 카메라는 원근법을 적용하는 PerspectiveCamera와 직교 투영을 사용하는 OrthographicCamera가 있다.

Renderer (렌더러)
렌더러는 장면을 렌더링해 브라우저의 캔버스에 표시하는 역할을 한다. Three.js에서는 주로 WebGLRenderer를 사용하여 장면을 화면에 출력한다.

Mesh (메쉬)
메쉬는 3D 장면에서 실제로 보이는 객체를 나타낸다. Geometry(기하학적 형태)와 Material(재질)로 구성되며, Geometry는 객체의 모양을 정의하고, Material은 객체의 표면이 어떻게 보일지를 결정한다.

Light (조명)
조명은 장면 내 객체에 빛을 비추는 역할을 한다. 다양한 유형의 조명이 있으며, 예를 들어 PointLight는 특정 지점에서 모든 방향으로 빛을 발산하고, DirectionalLight는 태양처럼 일정한 방향으로 빛을 비춘다.

Three.js를 사용하면 웹에서 고성능 3D 그래픽과 애니메이션을 구현할 수 있으며, 비교적 간단한 코드로도 복잡한 장면을 만들 수 있다.

상세한 내용은 다음 튜토리얼을 참고한다.

Creating a scene – three.js docs (threejs.org)

개발 방법

이 예제는 간단한 3D Cube를 웹에 렌더링하는 프로그램이다.

<html>

<head>

<title>3D viewer</title>

</head>

<body>

const model_container = document.getElementById('model-view');

const model_scene = new THREE.Scene();

const model_camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const model_renderer = new THREE.WebGLRenderer();

model_renderer.setSize(model_container.clientWidth, model_container.clientHeight);

model_renderer.setClearColor(0xADD8E6);

model_container.appendChild(model_renderer.domElement);

const model_light = new THREE.PointLight(0xffffff, 1, 100);

model_light.position.set(10, 1, 5);

model_scene.add(model_light);

function make_cube() {

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color: 0x00aa00, wireframe: true });

const cube = new THREE.Mesh(geometry, material);

model_scene.add(cube);

return cube;

}

model_cube = make_cube();

model_camera.position.set(2, 2, 2);

model_camera.lookAt(0, 0, 0);

function animate() {

requestAnimationFrame(animate);

model_cube.rotation.x += 0.01;

model_cube.rotation.y += 0.01;

model_renderer.render(model_scene, model_camera);

}

animate();

window.addEventListener('resize', () => {

model_camera.aspect = window.innerWidth / window.innerHeight;

model_camera.updateProjectionMatrix();

model_renderer.setSize(window.innerWidth, window.innerHeight);

});

</script>

</body>

</html>

실행하면, 간단한 3D cube 모델이 웹페이지에 렌더링 될 것이다.

마무리

Three.js는 Ricardo Cabello(Mr.doob)라는 개발자가 2010년에 처음 개발했다. Cabello는 원래 그래픽 디자이너이자 개발자로 활동했으며, WebGL을 더 쉽게 사용할 수 있는 라이브러리가 필요하다고 생각해 Three.js를 만들었다. 이후 Three.js는 오픈 소스로 공개되어 많은 개발자들의 기여로 지속적으로 발전해왔다.