Three.js FPS Starter

Click to play • WASD to move • Left click to shoot

html, body { height: 100%; margin: 0; background: #000; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } canvas { display: block; } #overlay { position: absolute; inset: 0; pointer-events: none; } #hud { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } #crosshair { color: rgba(255,255,255,0.9); font-size: 30px; transform: translateY(-2px); pointer-events: none; text-shadow: 0 0 6px rgba(0,0,0,0.8); } #info { position: absolute; left: 12px; bottom: 12px; color: rgba(255,255,255,0.85); font-size: 13px; background: rgba(0,0,0,0.25); padding: 6px 10px; border-radius: 6px; pointer-events: none; } .bullet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffcf4d; pointer-events: none; transform: translate(-50%, -50%); } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import Player from './Player.js'; import World from './World.js'; import Input from './Input.js'; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Scene and camera const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.6, 5); // Controls / player const controls = new PointerLockControls(camera, document.body); const player = new Player(camera, controls); // World and enemies const world = new World(scene); // Input const input = new Input(); // Simple HUD elements const infoEl = document.getElementById('info'); // Pointer lock flow document.addEventListener('click', () => { if (!controls.isLocked) { controls.lock(); } }); controls.addEventListener('lock', () => { infoEl.textContent = 'Controls locked • WASD / Space to jump • Left click to shoot • Esc to release'; }); controls.addEventListener('unlock', () => { infoEl.textContent = 'Click to play • WASD to move • Left click to shoot'; }); // Shooting: left mouse down window.addEventListener('mousedown', (e) => { if (e.button === 0 && controls.isLocked) { shoot(); } }); // Resize handling window.addEventListener('resize', onWindowResize); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // Raycaster for instant hit detection const raycaster = new THREE.Raycaster(); // Bullets array for visual bullet traces const bullets = []; function shoot() { // Visual bullet sphere that moves forward const origin = new THREE.Vector3(); origin.copy(camera.position); const dir = new THREE.Vector3(); camera.getWorldDirection(dir); // Raycast to detect immediate hits raycaster.set(origin, dir); const intersects = raycaster.intersectObjects(world.getTargetMeshes(), false); if (intersects.length > 0) { const hit = intersects[0]; const target = world.findTargetByMesh(hit.object); if (target) target.hit(50); // big damage spawnTracer(origin, hit.point); } else { // spawn tracer that flies forward spawnBullet(origin, dir); } } function spawnTracer(from, to) { const material = new THREE.LineBasicMaterial({ color: 0xfff59d, transparent: true, opacity: 0.9 }); const geometry = new THREE.BufferGeometry().setFromPoints([from, to]); const line = new THREE.Line(geometry, material); scene.add(line); setTimeout(() => { scene.remove(line); geometry.dispose(); material.dispose(); }, 120); } function spawnBullet(position, direction) { const speed = 70; const geometry = new THREE.SphereGeometry(0.04, 6, 6); const material = new THREE.MeshBasicMaterial({ color: 0xffcf4d }); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); const velocity = direction.clone().multiplyScalar(speed); scene.add(mesh); bullets.push({ mesh, velocity, life: 2.0, geometry, material }); } // Game loop const clock = new THREE.Clock(); function animate() { const delta = Math.min(0.05, clock.getDelta()); requestAnimationFrame(animate); player.update(delta, input, world); // update bullets for (let i = bullets.length - 1; i >= 0; i--) { const b = bullets[i]; b.mesh.position.addScaledVector(b.velocity, delta); b.life -= delta; // check collision with targets const hit = world.checkBulletCollision(b.mesh.position, 0.15); if (hit) { hit.target.hit(30); // spawn small impact tracer spawnTracer(b.mesh.position, b.mesh.position.clone().add(new THREE.Vector3(0,0.1,0))); // remove bullet scene.remove(b.mesh); b.geometry.dispose(); b.material.dispose(); bullets.splice(i, 1); continue; } if (b.life <= 0) { scene.remove(b.mesh); b.geometry.dispose(); b.material.dispose(); bullets.splice(i, 1); } } world.update(delta); renderer.render(scene, camera); } // Start animate(); // Expose some globals for debugging (optional) window.app = { scene, camera, player, world }; // Simple input manager export default class Input { constructor() { this.keys = {}; this._onKeyDown = (e) => { this.keys[e.code] = true; }; this._onKeyUp = (e) => { this.keys[e.code] = false; }; window.addEventListener('keydown', this._onKeyDown); window.addEventListener('keyup', this._onKeyUp); } isDown(keyCode) { return !!this.keys[keyCode]; } dispose() { window.removeEventListener('keydown', this._onKeyDown); window.removeEventListener('keyup', this._onKeyUp); } } import * as THREE from 'three'; export default class Player { constructor(camera, controls) { this.camera = camera; this.controls = controls; this.velocity = new THREE.Vector3(); this.direction = new THREE.Vector3(); this.speed = 8.0; // meters / second this.jumpSpeed = 6.0; this.isOnGround = false; // simple height of camera above ground this.height = 1.6; } update(delta, input, world) { // Movement input const forward = input.isDown('KeyW'); const backward = input.isDown('KeyS'); const left = input.isDown('KeyA'); const right = input.isDown('KeyD'); const jump = input.isDown('Space'); // Direction in camera space this.direction.set(0, 0, 0); if (forward) this.direction.z -= 1; if (backward) this.direction.z += 1; if (left) this.direction.x -= 1; if (right) this.direction.x += 1; this.direction.normalize(); // Transform direction to world space (yaw only) const yaw = this.controls.getObject().rotation.y; const cos = Math.cos(yaw); const sin = Math.sin(yaw); const dx = this.direction.x * cos - this.direction.z * sin; const dz = this.direction.x * sin + this.direction.z * cos; // Apply movement this.velocity.x += dx * this.speed * delta * 8; this.velocity.z += dz * this.speed * delta * 8; // Apply gravity this.velocity.y -= 9.8 * delta; // Jump if (jump && this.isOnGround) { this.velocity.y = this.jumpSpeed; this.isOnGround = false; } // Apply damping this.velocity.x -= this.velocity.x * 10.0 * delta; this.velocity.z -= this.velocity.z * 10.0 * delta; // Move the player object const move = this.velocity.clone().multiplyScalar(delta); this.controls.getObject().position.add(move); // Simple ground collision: sample height from world (flat ground y=0) const pos = this.controls.getObject().position; const groundY = world.getHeightAt(pos.x, pos.z); if (pos.y <= groundY + this.height) { this.velocity.y = 0; this.isOnGround = true; pos.y = groundY + this.height; } else { this.isOnGround = false; } } } import * as THREE from 'three'; import Enemy from './Enemy.js'; export default class World { constructor(scene) { this.scene = scene; this.targets = []; this.bullets = []; this._init(); } _init() { // Ground const groundGeo = new THREE.PlaneGeometry(200, 200); const groundMat = new THREE.MeshStandardMaterial({ color: 0x2f6b2f }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; this.scene.add(ground); // Lights const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 0.8); hemi.position.set(0, 50, 0); this.scene.add(hemi); const dir = new THREE.DirectionalLight(0xffffff, 0.8); dir.position.set(10, 20, 10); this.scene.add(dir); // Add some cover boxes const boxGeo = new THREE.BoxGeometry(2, 2, 2); const boxMat = new THREE.MeshStandardMaterial({ color: 0x664422 }); for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(boxGeo, boxMat); mesh.position.set((Math.random() - 0.5) * 80, 1, (Math.random() - 0.5) * 80); this.scene.add(mesh); } this.spawnTargets(10); } spawnTargets(count = 6) { for (let i = 0; i < count; i++) { const x = (Math.random() - 0.5) * 60; const z = -10 - Math.random() * 60; const target = new Enemy(new THREE.Vector3(x, 1, z)); this.targets.push(target); this.scene.add(target.mesh); } } getTargetMeshes() { return this.targets.filter(t => t.alive).map(t => t.mesh); } findTargetByMesh(mesh) { return this.targets.find(t => t.mesh === mesh); } getHeightAt(x, z) { // flat world for starter return 0; } checkBulletCollision(pos, radius) { for (let t of this.targets) { if (!t.alive) continue; const dist = t.mesh.position.distanceTo(pos); if (dist <= radius + t.radius) { return { target: t }; } } return null; } update(delta) { for (let i = this.targets.length - 1; i >= 0; i--) { const t = this.targets[i]; t.update(delta); if (!t.alive && t.age > 5.0) { // remove after some time this.scene.remove(t.mesh); this.targets.splice(i, 1); } } // Respawn targets if low if (this.targets.length < 6) { this.spawnTargets(4); } } } import * as THREE from 'three'; export default class Enemy { constructor(position = new THREE.Vector3()) { const geo = new THREE.BoxGeometry(1.2, 1.8, 0.6); const mat = new THREE.MeshStandardMaterial({ color: 0xd32f2f }); this.mesh = new THREE.Mesh(geo, mat); this.mesh.position.copy(position); this.mesh.castShadow = true; this.health = 100; this.alive = true; this.radius = 1.0; // physics this.velocity = new THREE.Vector3(); this.age = 0; } hit(damage = 10) { if (!this.alive) return; this.health -= damage; // flash const original = this.mesh.material.color.clone(); this.mesh.material.color.set(0xffff66); setTimeout(() => { if (this.mesh.material) this.mesh.material.color.copy(original); }, 120); if (this.health <= 0) { this.die(); } } die() { this.alive = false; // give a toss this.velocity.set((Math.random() - 0.5) * 4, 6 + Math.random() * 4, (Math.random() - 0.5) * 4); // change material if (this.mesh.material) this.mesh.material.color.set(0x555555); } update(delta) { this.age += delta; if (!this.alive) { // apply gravity this.velocity.y -= 9.8 * delta; this.mesh.position.addScaledVector(this.velocity, delta); // rotate while falling this.mesh.rotation.x += delta * 3; this.mesh.rotation.z += delta * 2; } else { // subtle idle bob this.mesh.position.y = 1 + Math.sin(this.age * 2) * 0.08; } } }