FIRST PERSON
SHOOTER GAME
Build a complete browser-based FPS from scratch with Three.js — pointer lock controls, projectile physics, collision detection, and particle explosions.
By Shane Brumback · Updated May 27, 2026
LIVE DEMO
Click to play the game running in the background. ESC to return to the tutorial.
Desktop: WASD — Move | Mouse — Look | Click/Space — Fire | M — Music
Mobile: Landscape only | Left Joystick — Move | Right Button — Fire | Touch Drag — Aim
Introduction
First Person Shooters are one of the most popular game genres, and building one in the browser is a fantastic way to learn real-time 3D programming. This tutorial walks you through creating a complete FPS game using Three.js that works on both desktop and mobile devices — from locking the mouse cursor for immersive camera control on PC, to virtual joystick and fire button touch controls on phones and tablets.
The game features WASD movement with boundary collision (or touch joystick on mobile), a projectile system that fires spheres from the camera's position in the direction you're looking, moving enemy cubes that patrol the arena, and a full explosion system with colored triangle shrapnel that flies outward on impact. On mobile, the game requires landscape orientation and provides a virtual joystick for movement plus a dedicated fire button — making it fully playable without a keyboard or mouse.
Everything runs in a single JavaScript module using Three.js ES modules with import maps. No build tools, no bundlers — just clean, readable code you can drop into any project and start customizing immediately.
What You'll Learn
- Setting up PointerLockControls for immersive first-person camera movement (desktop)
- Building mobile touch controls: virtual joystick, fire button, and touch-to-look aiming
- Detecting mobile devices and requiring landscape orientation for gameplay
- Building a projectile system that fires from the camera in the look direction
- Implementing WASD keyboard movement with boundary collision detection
- Creating enemy cubes with autonomous patrol movement and inter-cube collision avoidance
- Raycaster-based hit detection between projectiles and targets
- A triangle-based particle explosion system with physics and rotation
- Audio integration with background music, laser sounds, and explosion effects
- Making a single codebase work on both PC and mobile browsers
Prerequisites
Basic knowledge of Three.js (scene, camera, renderer) and JavaScript ES modules. You should be comfortable with vectors and 3D coordinate systems. No game engine experience required — this tutorial builds everything from first principles using only Three.js.
