Three.js Shooting Game

Click to play

Move: WASD
Look: MOUSE
Shoot: CLICK

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; } canvas { display: block; } #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } #instructions { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 14px; cursor: pointer; color: white; } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; let camera, scene, renderer, controls; let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; let velocity = new THREE.Vector3(); let direction = new THREE.Vector3(); let prevTime = performance.now(); const targets = []; const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); // Not used for PointerLock shooting, but good practice init(); animate(); function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); scene.fog = new THREE.Fog(0x87ceeb, 0, 50); // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.y = 1.6; // Approximate eye level // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Controls (Pointer Lock) controls = new PointerLockControls(camera, document.body); scene.add(controls.getObject()); // Add camera rig to scene const blocker = document.getElementById('blocker'); const instructions = document.getElementById('instructions'); instructions.addEventListener('click', function () { controls.lock(); }); controls.addEventListener('lock', function () { instructions.style.display = 'none'; blocker.style.display = 'none'; }); controls.addEventListener('unlock', function () { blocker.style.display = 'flex'; instructions.style.display = ''; }); // Keyboard Controls Listeners const onKeyDown = function (event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; } }; const onKeyUp = function (event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Shooting Listener document.addEventListener('click', shoot); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // Ground const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); // Forest green const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; scene.add(ground); // Targets const targetGeometry = new THREE.BoxGeometry(1, 1, 1); for (let i = 0; i < 10; i++) { const targetMaterial = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff }); const target = new THREE.Mesh(targetGeometry, targetMaterial); target.position.x = (Math.random() - 0.5) * 40; target.position.y = Math.random() * 5 + 0.5; // Place above ground target.position.z = (Math.random() - 0.5) * 40; target.userData.isTarget = true; // Mark as target scene.add(target); targets.push(target); } // Handle window resize window.addEventListener('resize', onWindowResize); } function shoot() { if (!controls.isLocked) return; // Only shoot if pointer is locked // Set raycaster from camera raycaster.setFromCamera({ x: 0, y: 0 }, camera); // Ray starts from center of screen const intersects = raycaster.intersectObjects(targets); // Check only against targets if (intersects.length > 0) { const intersectedObject = intersects[0].object; // Simple feedback: change color to red if (intersectedObject.userData.isTarget) { intersectedObject.material.color.set(0xff0000); // Optional: Remove target after a delay // setTimeout(() => { // scene.remove(intersectedObject); // targets.splice(targets.indexOf(intersectedObject), 1); // }, 500); } } } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const time = performance.now(); const delta = (time - prevTime) / 1000; // Time delta in seconds if (controls.isLocked === true) { // Calculate movement direction direction.z = Number(moveForward) - Number(moveBackward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); // Ensures consistent speed in all directions // Apply movement const moveSpeed = 5.0; // Units per second controls.moveRight(direction.x * moveSpeed * delta); controls.moveForward(direction.z * moveSpeed * delta); // Simple collision/boundary (optional) // controls.getObject().position.y = 1.6; // Keep camera height constant } prevTime = time; renderer.render(scene, camera); }