웹으로 플레이 가능한 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 게임의 뼈대를 제공합니다. 추가적인 기능(예: 적, 총기, 점수 시스템 등)을 추가하여 게임을 확장할 수 있습니다.
이 코드를 실행하면 기본적인 3D FPS 게임이 브라우저에서 실행됩니다. 추가적인 기능을 원하시면 말씀해 주세요!