[javascript] Three.js를 사용하여 웹에서의 실시간 주행 시뮬레이터 구현

29 Nov 2023

javascript

Three.js Logo

최근 웹에서 3D 시뮬레이션을 구현하는 것이 인기를 끌고 있습니다. Three.js는 JavaScript로 작성된 3D 그래픽 라이브러리로, 웹에서 3D 시뮬레이션 및 게임을 만드는 데 사용됩니다. 이번 블로그에서는 Three.js를 사용하여 웹에서 실시간 주행 시뮬레이터를 구현하는 방법을 알아보겠습니다.

1. Three.js 설치하기

먼저 npm을 사용하여 Three.js를 설치해야 합니다. 다음 명령을 사용하여 Three.js를 설치하세요:

npm install three

2. HTML 구성하기

실시간 주행 시뮬레이터를 구현하기 위해 HTML 페이지를 설정해야 합니다. 다음과 같이 간단한 HTML 구조를 작성하세요:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>실시간 주행 시뮬레이터</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

3. JavaScript로 실시간 주행 시뮬레이터 구현하기

이제 JavaScript를 사용하여 Three.js를 활용한 실시간 주행 시뮬레이터를 구현해보겠습니다. app.js라는 파일을 생성하고 다음과 같은 코드를 작성하세요:

import * as THREE from 'three';

// Three.js Scene 및 Camera 생성
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Three.js Renderer 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 주행 시뮬레이션 함수
function animate() {
    requestAnimationFrame(animate);

    // Cube 회전
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

4. 웹 브라우저에서 확인하기

이제 웹 브라우저에서 작성한 실시간 주행 시뮬레이터를 확인해보세요. 위에서 작성한 HTML 파일을 웹 브라우저로 열어보면, 회전하는 상자를 볼 수 있을 것입니다.

결론

이렇게 Three.js를 사용하여 실시간 주행 시뮬레이터를 웹에서 구현할 수 있습니다. Three.js는 강력한 3D 그래픽 라이브러리로, 더욱 복잡하고 멋진 시뮬레이션을 만들 수 있습니다. Three.js에 대한 자세한 내용은 공식 문서를 참조하세요. 즐겁게 개발해보세요!