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

29 Nov 2023

javascript

이번 블로그에서는 Three.js를 사용하여 웹에서 실시간 비행기 시뮬레이터를 구현하는 방법에 대해 알아보겠습니다.

Three.js란?

Three.js는 JavaScript 3D 라이브러리로, 웹에서 3D 그래픽을 생성하고 조작하는 데 도움을 줍니다. Three.js를 사용하면 WebGL을 사용하여 브라우저에서 실시간으로 3D 그래픽을 렌더링할 수 있습니다.

프로젝트 설정

우선 Three.js를 사용하여 웹에서 실시간 비행기 시뮬레이터를 구현하기 위해 프로젝트를 설정해야 합니다. 다음 명령어를 사용하여 Three.js를 설치합니다.

npm install three

이제 HTML 파일을 작성하고 Three.js 라이브러리를 로드하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>비행기 시뮬레이터</title>
    <style>
        body { margin: 0; }
        #canvas { width: 100%; height: 100%; }
    </style>
    <script src="https://threejs.org/build/three.js"></script>
</head>
<body>
    <div id="canvas"></div>
    <script src="app.js"></script>
</body>
</html>

비행기 모델 추가하기

이제 JavaScript 파일인 app.js를 생성하여 비행기를 추가하겠습니다. 먼저 Three.js를 초기화하고 렌더링할 캔버스를 만들어야 합니다.

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);

이어서 비행기 모델을 로드하고 씬에 추가하겠습니다. Three.js에서는 GLTF 포맷의 3D 모델을 지원합니다.

const loader = new THREE.GLTFLoader();
loader.load('airplane.glb', function (gltf) {
    const airplane = gltf.scene;
    scene.add(airplane);
});

비행기 조작하기

비행기를 움직이고 회전할 수 있도록 사용자 입력을 처리해야 합니다. 아래 코드는 키보드 입력을 감지하여 비행기를 이동시키는 예시입니다.

const keyboard = {};
document.addEventListener('keydown', (event) => {
    keyboard[event.key] = true;
});

document.addEventListener('keyup', (event) => {
    keyboard[event.key] = false;
});

function animate() {
    requestAnimationFrame(animate);

    // 사용자 입력에 따라 비행기 조작
    if (keyboard['ArrowUp']) {
        airplane.position.z -= 0.1;
    }
    if (keyboard['ArrowDown']) {
        airplane.position.z += 0.1;
    }
    if (keyboard['ArrowLeft']) {
        airplane.rotation.y += 0.1;
    }
    if (keyboard['ArrowRight']) {
        airplane.rotation.y -= 0.1;
    }

    renderer.render(scene, camera);
}

animate();

결론

위의 코드를 사용하여 Three.js를 통해 웹에서 실시간 비행기 시뮬레이터를 구현할 수 있습니다. 이를 변형하여 더 다양한 기능을 추가하거나 다른 3D 모델을 사용할 수도 있습니다.

더 자세한 내용은 Three.js 공식 문서를 참조하세요:

여러분의 창의력과 기술을 활용하여 멋진 웹 비행기 시뮬레이터를 만들어보세요!