웹 기반 3D FPS 게임 만들기 방법

답변:

웹으로 플레이 가능한 3D FPS 게임을 만드는 것은 흥미로운 프로젝트입니다. 아래는 기본적인 구조와 기능을 갖춘 3D FPS 게임을 만드는 방법에 대한 개요입니다. 이 예제는 Three.js와 같은 JavaScript 라이브러리를 사용하여 구현할 수 있습니다.

1. 기본 설정

먼저, Three.js 라이브러리를 포함해야 합니다. HTML 파일을 생성하고 다음과 같이 기본 구조를 설정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D FPS Game</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/PointerLockControls.js"></script>
    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
    <script>
        // 게임 코드가 여기에 들어갑니다.
    </script>
</body>
</html>

2. 기본 3D 씬 설정

Three.js를 사용하여 기본 3D 씬을 설정합니다.

let scene, camera, renderer, controls;

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 조명 추가
    const light = new THREE.AmbientLight(0xffffff); // 부드러운 흰색 빛
    scene.add(light);

    // 격자 맵 생성
    const gridHelper = new THREE.GridHelper(100, 100);
    scene.add(gridHelper);

    // 목표물 생성
    const targetGeometry = new THREE.BoxGeometry(1, 1, 1);
    const targetMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const target = new THREE.Mesh(targetGeometry, targetMaterial);
    target.position.set(0, 0.5, -5);
    scene.add(target);

    // 카메라 위치 설정
    camera.position.set(0, 1.6, 0);

    // 컨트롤 설정
    controls = new THREE.PointerLockControls(camera, document.body);
    scene.add(controls.getObject());

    document.addEventListener('click', () => {
        controls.lock();
    });

    animate();
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

init();

3. 이동 및 점프 기능 추가

WASD 키와 스페이스바를 사용하여 이동 및 점프 기능을 추가합니다.

const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
const speed = 0.1;

document.addEventListener('keydown', (event) => {
    switch (event.code) {
        case 'KeyW':
            direction.z = -1;
            break;
        case 'KeyS':
            direction.z = 1;
            break;
        case 'KeyA':
            direction.x = -1;
            break;
        case 'KeyD':
            direction.x = 1;
            break;
        case 'Space':
            if (controls.getObject().position.y <= 1.6) {
                velocity.y = 0.2; // 점프 높이
            }
            break;
    }
});

document.addEventListener('keyup', (event) => {
    switch (event.code) {
        case 'KeyW':
        case 'KeyS':
            direction.z = 0;
            break;
        case 'KeyA':
        case 'KeyD':
            direction.x = 0;
            break;
    }
});

function update() {
    if (controls.isLocked === true) {
        const delta = 0.1; // 프레임 간격
        velocity.x -= velocity.x * 10.0 * delta;
        velocity.z -= velocity.z * 10.0 * delta;

        direction.normalize();
        if (direction.length() > 0) {
            velocity.addScaledVector(direction, speed);
        }

        controls.getObject().position.addScaledVector(velocity, delta);
        controls.getObject().position.y += velocity.y; // Y축 이동
        velocity.y -= 0.01; // 중력 효과

        if (controls.getObject().position.y < 1.6) {
            controls.getObject().position.y = 1.6; // 바닥에 고정
            velocity.y = 0; // 중력 초기화
        }
    }
}

function animate() {
    requestAnimationFrame(animate);
    update();
    renderer.render(scene, camera);
}

4. 마우스 시점 이동

PointerLockControls를 사용하여 마우스 시점 이동을 구현합니다. 위의 코드에서 이미 포함되어 있습니다.

5. 최종 코드

위의 모든 코드를 통합하여 최종적으로 게임을 완성합니다. 이 코드는 기본적인 3D FPS 게임의 뼈대를 제공합니다. 추가적인 기능(예: 적, 총기, 점수 시스템 등)을 추가하여 게임을 확장할 수 있습니다.