[javascript] Three.js를 사용하여 웹에서의 3D 주차 시뮬레이션 개발

29 Nov 2023

javascript

최근에는 웹에서도 3D 그래픽을 사용하는 애플리케이션들이 점점 더 많아지고 있습니다. 이 중에서도 Three.js는 웹에서 3D 그래픽을 손쉽게 구현할 수 있는 자바스크립트 라이브러리입니다. 그래서 이번 포스트에서는 Three.js를 사용하여 웹에서의 3D 주차 시뮬레이션을 개발하는 방법에 대해서 알아보겠습니다.

1. Three.js란?

Three.js는 WebGL 기반의 3D 그래픽을 웹에서 사용할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이를 이용하면 쉽게 3D 모델을 만들 수 있고, 빛과 그림자 효과를 추가하거나 애니메이션을 적용할 수도 있습니다.

2. 3D 주차 시뮬레이션 개발 단계

2.1. Three.js 설치

먼저, Three.js를 설치해야 합니다. npm을 사용한다면 다음 명령어를 입력합니다.

npm install three

또는, CDN을 사용할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/three@latest"></script>

2.2. HTML 구조 설정

Three.js를 사용하기 위해 필요한 HTML 구조를 설정해야 합니다. <div> 요소에 3D 그래픽을 렌더링할 영역을 만들고, 이를 위한 <canvas> 요소를 추가합니다.

<div id="canvasContainer">
    <canvas id="canvas"></canvas>
</div>

2.3. JavaScript 코드 작성

위에서 설정한 HTML 구조를 기반으로 자바스크립트 코드를 작성합니다. 기본적으로 Three.js는 Scene, Renderer, Camera로 이루어져 있습니다. Scene은 3D 그래픽을 담고 있는 공간을 의미하고, Renderer는 렌더링을 담당합니다. Camera는 보여지는 시점을 설정하는 역할을 합니다.

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

2.4. 오브젝트 생성과 렌더링

이제 주차장을 만들기 위해 필요한 오브젝트들을 생성하고, Three.js scene에 추가해 줍니다.

const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);

scene.add(ground);

2.5. 애니메이션 추가

애니메이션을 추가하기 위해서는 매 프레임마다 실행될 함수를 작성하고, renderer의 render() 함수를 호출해야 합니다.

function animate() {
    requestAnimationFrame(animate);

    // 오브젝트 변형

    renderer.render(scene, camera);
}

animate();

3. 결론

이렇게 Three.js를 사용하여 웹에서의 3D 주차 시뮬레이션을 개발하는 방법을 간단히 알아보았습니다. Three.js는 다양한 기능을 제공하기 때문에 웹에서 3D 그래픽을 구현해야 할 경우, 매우 유용한 도구입니다. 추가적으로 더 복잡한 기능을 구현하고 싶다면 관련 문서와 예제들을 참고하여 응용해 보세요.