[javascript] Three.js를 사용하여 웹에서의 3D 교통편 개발

29 Nov 2023

javascript

소개

Three.js는 웹에서 3D 그래픽을 만들기 위한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 웹에서 실시간 3D 교통편을 개발할 수 있습니다. 이 글에서는 Three.js를 사용하여 웹에서 3D 교통편을 개발하는 방법에 대해 알아보겠습니다.

Three.js 설정

먼저 Three.js를 사용하기 위해 HTML 파일에 Three.js 라이브러리를 추가해야 합니다. 아래의 코드를 HTML 파일의 헤더 부분에 추가하세요.

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

씬(Scene) 생성

Three.js에서는 씬(Scene)이라는 개념을 사용하여 3D 공간을 구성합니다. 씬은 모든 3D 요소들을 포함하고 관리하는 컨테이너 역할을 합니다. 아래의 코드는 씬을 생성하는 예제입니다.

var scene = new THREE.Scene();

카메라(Camera) 설정

씬에는 카메라(Camera)도 필요합니다. 카메라는 보이는 시점을 지정하고, 뷰포트에 보여지는 영역을 결정합니다. 아래의 코드는 카메라를 생성하고 씬에 추가하는 예제입니다.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

렌더러(Renderer) 설정

Three.js에서는 렌더러(Renderer)를 사용하여 씬을 렌더링합니다. 렌더러는 실제로 씬을 그래픽으로 표현하는 역할을 합니다. 아래의 코드는 렌더러를 생성하고 HTML 파일의 특정 요소에 추가하는 예제입니다.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

오브젝트(Object) 생성

씬에는 3D 오브젝트(Object)도 필요합니다. 오브젝트는 씬 안에서 움직이는 요소들을 나타냅니다. 아래의 코드는 큐브(Cube) 오브젝트를 생성하고 씬에 추가하는 예제입니다.

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

애니메이션(Animation) 설정

Three.js를 사용하여 웹에서 3D 교통편을 개발할 때, 애니메이션을 이용하여 움직임을 구현할 수 있습니다. 아래의 코드는 애니메이션을 적용하는 예제입니다.

function animate() {
    requestAnimationFrame(animate);
    
    // 오브젝트에 움직임을 주는 코드
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

결론

위에서 소개한 방법을 사용하여 Three.js를 활용하여 웹에서 실시간 3D 교통편을 개발할 수 있습니다. Three.js는 강력하고 유연한 3D 그래픽 라이브러리로, 더욱 복잡한 3D 교통편을 개발할 때도 손쉽게 활용할 수 있습니다.

소개