[javascript] Three.js를 사용하여 웹에서의 3D 도서관 시스템 개발

29 Nov 2023

javascript

Three.js Logo

이 문서에서는 Three.js를 사용하여 웹에서 3D 도서관 시스템을 개발하는 방법에 대해 알아보겠습니다.

Three.js란 무엇인가요?

Three.js는 WebGL을 기반으로 3D 그래픽을 생성하고 렌더링하는 JavaScript 라이브러리입니다. Three.js를 사용하면 다양한 3D 오브젝트를 웹에서 쉽게 구현할 수 있습니다. Three.js는 강력한 기능을 제공하는 동시에 사용하기 쉽고 학습 곡선이 낮아 개발자들에게 인기가 높은 라이브러리입니다.

Three.js를 사용하여 3D 도서관 시스템 개발하기

Three.js를 사용하여 3D 도서관 시스템을 개발하는 방법을 알아보겠습니다.

1. Three.js 라이브러리 추가하기

먼저, HTML 파일에 Three.js 라이브러리를 추가해야 합니다. Three.js는 CDN을 통해 쉽게 가져올 수 있습니다.

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

2. 씬(Scene) 생성하기

Three.js에서 씬은 3D 화면을 구성하기 위한 도화지와 같은 역할을 합니다. 씬을 생성하려면 다음과 같이 코드를 작성합니다.

const scene = new THREE.Scene();

3. 카메라(Camera) 설정하기

카메라는 씬에 있는 오브젝트를 보기 위해 필요한 요소입니다. Three.js에서는 PerspectiveCamera를 사용하여 원근 효과를 적용할 수 있습니다. 카메라를 생성하고 위치를 설정하는 코드는 다음과 같습니다.

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

4. 조명(Lighting) 추가하기

Three.js에서 조명은 씬에 있는 오브젝트를 밝게 비추는 역할을 합니다. 조명을 추가하려면 다음과 같이 코드를 작성합니다.

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

5. 도서관 모델 추가하기

Three.js에서는 외부 3D 모델 파일을 가져와 씬에 추가할 수 있습니다. 여기에서는 예시로 도서관 모델을 사용하겠습니다.

// 도서관 모델 로드
const loader = new THREE.GLTFLoader();
loader.load('assets/library.glb', function (gltf) {
  const libraryModel = gltf.scene;
  scene.add(libraryModel);
});

6. 렌더러(Renderer) 생성하기

Three.js에서 렌더러는 씬과 카메라의 내용을 랜더링하고 출력하는 역할을 합니다. 렌더러를 생성하고 화면에 렌더링하는 코드는 다음과 같습니다.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

결론

이제 Three.js를 사용하여 웹에서 3D 도서관 시스템을 개발하는 방법을 알아보았습니다. Three.js는 강력하고 유연한 3D 그래픽 라이브러리로, 다양한 웹 기반 3D 애플리케이션을 개발하는 데 활용할 수 있습니다. Three.js를 사용하여 직접 다른 3D 시스템을 개발해 보세요.

목차