Incredible 3D FPS

Click to play — WASD to move, Space to jump, Mouse to look, Left click to shoot.

html, body { height: 100%; margin: 0; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #000; } #overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 10; background: rgba(0,0,0,0.5); padding: 24px; border-radius: 8px; min-width: 320px; } #hud { position: absolute; left: 12px; top: 12px; color: white; z-index: 10; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.8); } #crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; pointer-events: none; z-index: 9; mix-blend-mode: difference; } #crosshair:before, #crosshair:after { content: ""; position: absolute; background: white; width: 2px; height: 24px; left: 50%; top: 0; transform: translateX(-50%); } #crosshair:after { transform: translateY(-50%) rotate(90deg); top: 50%; } button { padding: 10px 16px; border-radius: 6px; border: none; background: #1e90ff; color: white; cursor: pointer; font-size: 14px; } #status { position: absolute; right: 12px; top: 12px; color: white; z-index: 10; text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-weight: 600; } import * as THREE from 'three'; import { createRenderer } from './engine/renderer.js'; import { createScene } from './engine/scene.js'; import { createPlayer } from './engine/player.js'; import { createProjectiles } from './engine/projectiles.js'; import { createEnemies } from './engine/enemies.js'; import { createHUD } from './ui/hud.js'; let renderer, scene, camera; let player, projectiles, enemies, hud; let clock = new THREE.Clock(); let overlay = document.getElementById('overlay'); async function init() { renderer = createRenderer(); scene = createScene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); camera.position.set(0, 2, 5); // HUD and UI hud = createHUD(); document.body.appendChild(hud.container); // Player + controls player = createPlayer(camera, renderer.domElement, hud); // Projectiles manager projectiles = createProjectiles(scene); // Enemies manager enemies = createEnemies(scene, player, hud); // Click-to-start const startBtn = document.getElementById('start-btn'); startBtn.addEventListener('click', () => { overlay.style.display = 'none'; player.requestPointerLock(); }); // Hook input: shooting window.addEventListener('mousedown', (e) => { if (player.isLocked()) { if (e.button === 0) { // left click const bullet = projectiles.fire(camera); if (bullet) { hud.onShot(); } } } }); window.addEventListener('resize', onWindowResize); onWindowResize(); animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const dt = Math.min(0.1, clock.getDelta()); player.update(dt); projectiles.update(dt, enemies); enemies.update(dt, projectiles); hud.update(dt, player, enemies); renderer.render(scene, camera); } init(); import * as THREE from 'three'; export function createRenderer() { const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); return renderer; } import * as THREE from 'three'; export function createScene() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x89caff); // Fog scene.fog = new THREE.Fog(0x89caff, 20, 120); // Ground const groundGeo = new THREE.PlaneGeometry(200, 200); const groundMat = new THREE.MeshStandardMaterial({ color: 0x4b7a3b }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Directional light (sun) const sun = new THREE.DirectionalLight(0xffffff, 1.0); sun.position.set(20, 40, 10); sun.castShadow = true; sun.shadow.camera.left = -50; sun.shadow.camera.right = 50; sun.shadow.camera.top = 50; sun.shadow.camera.bottom = -50; sun.shadow.mapSize.set(2048, 2048); scene.add(sun); // Ambient fill scene.add(new THREE.AmbientLight(0xffffff, 0.25)); // A few low walls for cover const wallMat = new THREE.MeshStandardMaterial({ color: 0x8e8e8e }); for (let i = 0; i < 8; i++) { const box = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 1.5), wallMat); box.position.set(Math.random() * 60 - 30, 1, Math.random() * 60 - 30); box.castShadow = true; box.receiveShadow = true; scene.add(box); } // Some simple props (rocks) const rockMat = new THREE.MeshStandardMaterial({ color: 0x6b6b6b }); for (let i = 0; i < 20; i++) { const r = 0.5 + Math.random() * 1.2; const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(r, 1), rockMat); rock.position.set(Math.random() * 160 - 80, r, Math.random() * 160 - 80); rock.castShadow = true; scene.add(rock); } return scene; } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; export function createPlayer(camera, domElement, hud) { const controls = new PointerLockControls(camera, domElement); const velocity = new THREE.Vector3(); const direction = new THREE.Vector3(); const move = { forward: false, back: false, left: false, right: false, jump: false }; let canJump = false; let isLocked = false; const params = { speed: 8.0, jumpSpeed: 7.0, gravity: 25.0, height: 1.8, health: 100, maxHealth: 100 }; // Pointer lock events controls.addEventListener('lock', () => { isLocked = true; hud.showCrosshair(true); }); controls.addEventListener('unlock', () => { isLocked = false; hud.showCrosshair(false); }); function onKeyDown(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': move.forward = true; break; case 'ArrowLeft': case 'KeyA': move.left = true; break; case 'ArrowDown': case 'KeyS': move.back = true; break; case 'ArrowRight': case 'KeyD': move.right = true; break; case 'Space': if (canJump === true) { velocity.y = params.jumpSpeed; canJump = false; } break; } } function onKeyUp(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': move.forward = false; break; case 'ArrowLeft': case 'KeyA': move.left = false; break; case 'ArrowDown': case 'KeyS': move.back = false; break; case 'ArrowRight': case 'KeyD': move.right = false; break; } } document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Simulate a simple "ground" check: if below height, snap to height function update(delta) { if (!isLocked) return; // damping velocity.x -= velocity.x * 10.0 * delta; velocity.z -= velocity.z * 10.0 * delta; // gravity velocity.y -= params.gravity * delta; direction.z = (move.forward ? 1 : 0) - (move.back ? 1 : 0); direction.x = (move.right ? 1 : 0) - (move.left ? 1 : 0); direction.normalize(); if (direction.lengthSq() > 0) { velocity.x -= direction.x * params.speed * delta; velocity.z -= direction.z * params.speed * delta; } // Move controls controls.moveRight(-velocity.x * delta); controls.moveForward(-velocity.z * delta); controls.getObject().position.y += velocity.y * delta; // Ground collision (simple) if (controls.getObject().position.y < params.height) { velocity.y = 0; controls.getObject().position.y = params.height; canJump = true; } } function requestPointerLock() { // user gesture already invoked in UI start button domElement.requestPointerLock = domElement.requestPointerLock || domElement.mozRequestPointerLock; controls.lock(); } function isLockedFn() { return isLocked; } function damage(amount) { params.health -= amount; if (params.health < 0) params.health = 0; hud.setHealth(params.health, params.maxHealth); } function heal(amount) { params.health = Math.min(params.maxHealth, params.health + amount); hud.setHealth(params.health, params.maxHealth); } function getPosition() { return controls.getObject().position.clone(); } function getCameraDirection() { // returns a normalized vector in world space const dir = new THREE.Vector3(0, 0, -1); const quat = new THREE.Quaternion(); controls.getObject().getWorldQuaternion(quat); dir.applyQuaternion(quat); dir.normalize(); return dir; } return { controls, update, requestPointerLock, isLocked: isLockedFn, damage, heal, getPosition, getCameraDirection, params }; } import * as THREE from 'three'; export function createProjectiles(scene) { const bullets = []; const bulletSpeed = 120; const bulletLifetime = 2.5; const geom = new THREE.SphereGeometry(0.06, 6, 6); const mat = new THREE.MeshBasicMaterial({ color: 0xffe08a }); function fire(camera) { // position a little in front of camera const pos = new THREE.Vector3(); camera.getWorldPosition(pos); const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion).normalize(); const bullet = new THREE.Mesh(geom, mat); bullet.position.copy(pos).add(dir.clone().multiplyScalar(0.6)); bullet.userData.velocity = dir.clone().multiplyScalar(bulletSpeed); bullet.userData.lifetime = bulletLifetime; bullet.userData.radius = 0.06; scene.add(bullet); bullets.push(bullet); return bullet; } function update(dt, enemies) { for (let i = bullets.length - 1; i >= 0; i--) { const b = bullets[i]; b.position.addScaledVector(b.userData.velocity, dt); b.userData.lifetime -= dt; // collision with enemies for (let j = 0; j < enemies.list.length; j++) { const e = enemies.list[j]; if (!e) continue; const dist2 = b.position.distanceToSquared(e.position); const rSum = (b.userData.radius + e.radius); if (dist2 <= rSum * rSum) { // hit e.hit(34); // remove bullet scene.remove(b); bullets.splice(i, 1); break; } } if (i >= 0 && bullets[i] === b && b.userData.lifetime <= 0) { scene.remove(b); bullets.splice(i, 1); } } } return { fire, update, bullets }; } import * as THREE from 'three'; export function createEnemies(scene, player, hud) { const list = []; const enemyMat = new THREE.MeshStandardMaterial({ color: 0xd14b4b }); const enemyRadius = 0.9; function spawn(position) { const mesh = new THREE.Mesh(new THREE.SphereGeometry(enemyRadius, 12, 12), enemyMat); mesh.position.copy(position); mesh.castShadow = true; mesh.receiveShadow = true; mesh.userData = { health: 100, radius: enemyRadius }; scene.add(mesh); const enemy = { mesh, position: mesh.position, radius: enemyRadius, hit(amount) { mesh.userData.health -= amount; if (mesh.userData.health <= 0) { // die scene.remove(mesh); const idx = list.indexOf(enemy); if (idx !== -1) list.splice(idx, 1); hud.onEnemyKilled(); } else { // small reaction mesh.scale.setScalar(1.05); setTimeout(() => mesh.scale.setScalar(1), 80); } }, update(delta) { // simple AI: move toward player if within range const ppos = player.getPosition(); const toPlayer = new THREE.Vector3().subVectors(ppos, mesh.position); const dist = toPlayer.length(); if (dist < 40) { toPlayer.normalize(); mesh.position.addScaledVector(toPlayer, delta * 2.0); } // If very close, deal damage if (dist < 1.5 && player.isLocked()) { player.damage(10 * delta); } // Y ground align mesh.position.y = enemyRadius; } }; list.push(enemy); return enemy; } // initial spawn for (let i = 0; i < 6; i++) { const pos = new THREE.Vector3((Math.random() - 0.5) * 60, enemyRadius, (Math.random() - 0.5) * 60); spawn(pos); } function update(dt, projectiles) { for (let i = 0; i < list.length; i++) { list[i].update(dt); } // occasionally spawn more if (Math.random() < dt * 0.15 && list.length < 18) { const angle = Math.random() * Math.PI * 2; const r = 40 + Math.random() * 20; spawn(new THREE.Vector3(Math.cos(angle) * r, enemyRadius, Math.sin(angle) * r)); } } return { list, spawn, update }; } export function createHUD() { const container = document.createElement('div'); container.id = 'hud'; const healthEl = document.createElement('div'); healthEl.id = 'health'; healthEl.textContent = 'Health: 100'; const scoreEl = document.createElement('div'); scoreEl.id = 'score'; scoreEl.textContent = 'Kills: 0'; container.appendChild(healthEl); container.appendChild(scoreEl); // Crosshair element const cross = document.createElement('div'); cross.id = 'crosshair'; cross.style.display = 'none'; cross.setAttribute('aria-hidden', 'true'); document.body.appendChild(cross); let kills = 0; let shots = 0; function onEnemyKilled() { kills++; scoreEl.textContent = 'Kills: ' + kills; } function onShot() { shots++; } function setHealth(h, max) { healthEl.textContent = 'Health: ' + Math.round(h) + ' / ' + max; if (h <= 0) { // show game over overlay const ov = document.getElementById('overlay'); ov.style.display = ''; ov.querySelector('h1').textContent = 'Game Over'; ov.querySelector('#start-instruction').textContent = 'Refresh to play again.'; const btn = ov.querySelector('#start-btn'); btn.style.display = 'none'; } } function showCrosshair(v) { cross.style.display = v ? 'block' : 'none'; } function update(dt, player, enemies) { // optional: dynamic HUD effects could go here } return { container, onEnemyKilled, onShot, setHealth, showCrosshair, update }; }