웹에서 플레이 가능한 3D FPS 게임 만들기

답변:

웹에서 플레이 가능한 3D FPS 게임을 만들기 위해서는 HTML, CSS, JavaScript와 WebGL 또는 Three.js와 같은 라이브러리를 사용할 수 있습니다. 아래는 기본적인 구조와 기능을 갖춘 간단한 3D FPS 게임의 예시 코드입니다. 이 코드는 Three.js를 사용하여 작성되었습니다.

1. 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 src="https://threejs.org/examples/js/geometry/BoxGeometry.js"></script>
    <script src="https://threejs.org/examples/js/geometry/PlaneGeometry.js"></script>
    <script>
        let scene, camera, renderer, controls;
        let grid, target;

        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 gridHelper = new THREE.GridHelper(10, 10);
            scene.add(gridHelper);

            // 목표물 생성
            const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
            const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            target = new THREE.Mesh(geometry, material);
            target.position.set(0, 0.25, -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();
            });

            // 이벤트 리스너
            window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('keydown', onKeyDown, false);

            animate();
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function onKeyDown(event) {
            switch (event.code) {
                case 'KeyW':
                    controls.moveForward(0.1);
                    break;
                case 'KeyS':
                    controls.moveForward(-0.1);
                    break;
                case 'KeyA':
                    controls.moveRight(-0.1);
                    break;
                case 'KeyD':
                    controls.moveRight(0.1);
                    break;
                case 'Space':
                    controls.getObject().position.y += 0.1; // 점프
                    break;
            }
        }

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

        init();
    </script>
</body>
</html>

2. 설명

Three.js: 3D 그래픽을 쉽게 다룰 수 있는 라이브러리입니다.
PointerLockControls: 마우스 포인터를 잠그고 FPS 스타일의 카메라 컨트롤을 가능하게 합니다.
GridHelper: 흰색 줄 격자를 생성하여 맵을 표현합니다.
BoxGeometry: 목표물로 사용할 빨간색 박스를 생성합니다.
이벤트 리스너: WASD 키로 이동하고 스페이스바로 점프할 수 있도록 설정합니다.

3. 실행 방법

위 코드를 복사하여 .html 파일로 저장합니다.
웹 브라우저에서 해당 파일을 열면 게임이 실행됩니다.

이 코드는 기본적인 구조만 제공하므로, 추가적인 기능(예: 충돌 감지, 점프 물리, 목표물과의 상호작용 등)을 구현하려면 더 많은 작업이 필요합니다.

웹에서 플레이 가능한 3D FPS 게임 만들기

사용하여 답변함 OpenAI o1 mini by OpenAI o1

1. HTML 파일

2. 설명

3. 실행 방법