THREE.JS FIRST PERSON
SHOOTER GAME

How Do You Build a First Person Shooter in JavaScript? (Quick Answer)

To build a first person shooter in JavaScript with Three.js, attach PointerLockControls to a perspective camera for mouse look, move the player with WASD scaled by delta time, fire by casting a Raycaster from the centre of the screen, and give each enemy a simple hit box. Load a rigged soldier GLB with GLTFLoader, clone it with SkeletonUtils so every enemy has its own skeleton and animations, count hits per soldier, and on the third hit swap the soldier for a pooled explosion (fireball, smoke, debris, shockwave and light) and add the kill to the score. Add a joystick, drag-to-look and a fire button so the same game plays on phones.

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 FPS Game Starter gives you a small but complete game: you walk a bright greybox arena, armored soldiers run around it, you shoot them, they explode, and your kills are scored.

The controls come straight from the Three.js FPS Controls tutorial: a pitch clamp so the camera never flips, a lock-click guard so the first click never fires, a firing watchdog so the gun never sticks, air momentum, wall sliding, gun bob and touch controls. On top of that we add the game: enemies, damage, explosions and scoring.

Everything is one HTML file with an import map. No build tools and no bundler, just code you can open, read and start changing.

What You'll Build

A playable Three.js FPS: a 700 x 700 greybox arena with a sunny sky, drifting clouds and soft shadows; eight armored soldiers that run between open spots and shoot back when you get close; a first-person rifle with muzzle flash, sparks, recoil and gun bob; hit flashes and a big explosion on the third hit; a score that tracks kills, streaks and accuracy; and a full game loop: START GAME, 3 lives, a red flash when you are hit, GAME OVER and restart. It plays with mouse and keyboard on desktop and with touch controls on phones.

What You'll Learn

• PointerLockControls with a pitch clamp, a lock-click guard and a per-frame firing watchdog
• Walk, sprint, jump and air momentum, all scaled by delta time
• Box and ramp collision with wall sliding
• Loading one rigged GLB and cloning it with SkeletonUtils for many animated enemies
• Simple enemy AI: run to random open spots, stop, turn and fire
• Hitscan shooting with a Raycaster and invisible hit boxes
• Pooled explosion VFX: fireball, smoke, debris, shockwave ring, light flash and camera shake
• Kill scoring with streak bonuses, accuracy and a kill message
• Touch controls so the same file plays on phones

Prerequisites

Basic knowledge of Three.js (scene, camera, renderer) and JavaScript ES modules, and a local web server to open the file (for example npx serve). No game engine experience required.

Build the Three.js FPS Step by Step

Here is every step in the order you build it. Each one has a plain-words summary below; members get the full explanation and the exact code for each step, cut straight from the full file.

1. Settings, Renderer, Scene and Camera — In plain words: we load Three.js, pick the game's numbers (speeds, gravity, soldier count, points, lives, attack range), set up sound, and create the renderer, the scene and the camera the player looks through.
2. A Greybox Map With Sky, Clouds, Shadows and Collision — In plain words: we build a grey grid test level with a bright blue sky, drifting clouds and sun shadows, and give every wall, ramp and crate collision so you can't walk through it.
3. PointerLockControls With a Pitch Clamp — In plain words: we lock the mouse so moving it turns your head, and stop the camera from reaching exactly straight up or down, where it can flip.
4. The Lock and Unlock Lifecycle — In plain words: we react when the mouse gets locked or released, hide or show the START GAME menu, and reset the trigger each time.
5. Mouse Input With the Lock Guard — In plain words: the click that starts the game never fires a shot; only clicks while the mouse is locked pull the trigger.
6. A Per-Frame Firing Watchdog — In plain words: every frame we compare "is the gun firing?" with "is the button really down?" and fix any mismatch, so the gun never gets stuck firing.
7. Keyboard Input — In plain words: WASD or the arrow keys set movement flags, Shift sprints and Space jumps once per press.
8. Hitscan Firing With a Raycaster — In plain words: while the trigger is held we fire 10 shots a second, cast a ray from the middle of the screen, and tell a soldier when the ray hits him; the gun stops completely once the game is over.
9. A First-Person Gun From Primitives — In plain words: we build a rifle out of boxes and cylinders and glue it to the camera, so it always sits in the bottom right of your view.
10. Pooled Firing VFX and Gun Bob — In plain words: every shot shows a muzzle flash, sparks and a scorch mark, kicks the gun back and shakes the screen, and the rifle bobs with your steps, all without creating new objects per shot.
11. Touch Controls for Phones — In plain words: on a phone the left thumb moves with a joystick, the right thumb drags to look, and big buttons fire and jump.
12. Movement, Air Momentum, Jump and Gravity — In plain words: held keys become walking or sprinting speed, you keep your speed in the air, you slide along walls instead of sticking, and Space jumps with gravity that feels the same at any frame rate.
13. Armored Soldiers That Run Around the Map — In plain words: we load one armored soldier model, clone it 8 times, and each soldier runs (a little slower, so they don't slide) between random open spots, and when you get close he stops, turns and shoots at you.
14. Three Hits and the Soldier Explodes — In plain words: each hit flashes the soldier red; on the third hit he disappears in a fireball with smoke, flying armor chunks, a shockwave ring, a light flash, a boom and camera shake, then respawns away from you.
15. Scoring That Tracks Kills — In plain words: every kill adds 100 points, kills less than 4 seconds apart build a streak bonus, and a big "SOLDIER DOWN" message pops up.
16. The HUD — In plain words: the panel in the corner shows kills, streak, shots, hits, accuracy, your health and lives, and how many soldiers are alive.
17. The Game Loop: Lives, Damage, Game Over and Restart — In plain words: soldiers that get close shoot back with a visible muzzle flash and tracer (walls block their shots), every hit flashes the screen red, 3 hits cost a life, then the game pauses for 1.5 seconds on a YOU WERE HIT! message and respawns you on a solid floating block (same grey grid as the map, held up by a see-through cyan column) above the battlefield so you can see the fight and drop back in (every new game starts on that pad too, and you cannot be hurt while you stand on it, for up to 10 seconds), a small unstick pass makes sure a jump can never leave you stuck inside a wall, losing all 3 lives shows GAME OVER, your gun stops at once, and after a 3-second countdown a fresh START GAME press resets score, lives, soldiers and your position for a new round.
18. One Game Loop in a Fixed Order — In plain words: every frame runs the same steps in the same order: input, movement, firing, effects, soldiers, explosions, the game rules (lives, hurt flash, enemy muzzle flashes, Game Over countdown), then draw.

That's the shape of the build. The step-by-step code breakdown and the full copy-paste file are below — members unlock them (become a member to get every premium tutorial and the source code).

Recap

• PointerLockControls gives desktop players true FPS mouse look, with a pitch clamp, a lock-click guard and a firing watchdog; touch drag-to-look does the same on phones.
• One rigged armored soldier GLB, cloned with SkeletonUtils, becomes eight animated enemies that run, stop and fire.
• A Raycaster from the centre of the screen hits invisible soldier boxes; three hits and the soldier explodes.
• Explosions are pooled: fireball, smoke, armor debris, a shockwave ring, a light flash and camera shake, with no new objects per kill.
• Every kill scores 100 points, quick kills build a streak bonus, and the HUD tracks kills and accuracy.
• A complete game loop: START GAME, soldiers attack only when you are close, 3 hits cost a life, a short YOU WERE HIT! pause, a thick spawn block above the battlefield (map floor material, see-through cyan support column) where every game starts and you respawn, shielded from soldier hits until you step off (10-second cap), wall unstick so jumps never trap you, 3 lives, GAME OVER, then restart with everything reset.

LEVEL UP YOUR FPS CONTROLS

Take this starter further with pointer lock mouse look, wall collision and ramps, a first-person gun with muzzle flash, and mobile touch controls, all explained step by step.

Next Steps

• Better controls: add a pitch clamp, a lock-click guard, air momentum and a firing watchdog in the Three.js FPS controls (PointerLockControls) tutorial.
• A real weapon: give the player a first-person Tommy gun with muzzle flash, targets and collision in the Three.js Tommy gun FPS tutorial.
• The story behind the fixes: read the Three.js FPS controls article.
• Keyboard and pointer lock basics: keyboard inputs for first person games and pointer lock controls.
• Real hits: unify the visual projectile and the hit ray (see the note above), then add enemies that shoot back.
• Play a finished game: Super Soldier Battle is a free multiplayer Three.js FPS. Browse more Three.js tutorials or go back to the home page.

More Three.js FPS Tutorials

Three.js FPS Controls Tutorial

Pitch clamp, lock-click guard, air momentum and touch controls.

Three.js Tommy Gun FPS

A first-person Tommy gun with VFX, targets and collision.

Three.js FPS Controls Article

Four control bugs real players found, and the fixes.

WANT TO BLOW SOMETHING UP?

Switch gears from games to effects: build a 3D rockfire explosion in Three.js — flying debris, fire, smoke, a shockwave, and a scorch crater that grows with the blast. The whole effect in one copy-paste file, with a live demo you can orbit.

WANT TO SEE AI BUILD A 3D CHARACTER?

Watch Grok Bot AI build a fully rigged, animated capybara in Three.js straight from plain-English prompts — model loading, skeleton, and looping animation, all explained step by step.

WANT A RIGGED CHARACTER YOU CAN DRIVE?

Loved this? The companion tutorial loads a free rigged super soldier GLB in Three.js and gives it a full keyboard controller — WASD to move, Shift to run, Space to jump, F to fire. Same rig-and-animate idea, taken to a playable character.

SEE 3D AND 2D BROWSER GAMES IN ACTION

My free browser games are full Three.js 3D experiences — no download, they run right in your browser.