[01]Three.js / Games
Three.js games
Play real WebGL games in the browser, then read how each one was built. No install, no store, no download: a Three.js game is a URL.
- 01Playable in any modern browser
- 02Built by the community
- 03Every build broken down
- 04Open toolchain, free to copy
How to build a Three.js game
A browser game needs four things: a scene and a render loop, something the player controls, collision so the world pushes back, and a reason to keep playing. Three.js handles the first of those and gets out of your way on the rest, which is why the games further down this page look nothing like each other.
Below you will find the toolchain those games are built on, the three stages of getting a game running, the course we recommend for learning it properly, and the finished games themselves.
Build your own
Everything here runs on the same open toolchain
There is no engine licence and no proprietary editor. Add physics and collision with Cannon.js, skip the React Three Fiber boilerplate with drei, and tune gameplay values live with Tweakpane.
Need environments? Generate trees procedurally with EZ-Tree and write your own materials with Three.js shaders.
What a browser game gets you:
- Playable from a link, on any device
- No install and no app store review
- WebGL today, WebGPU when you want it
- The whole stack is open source
Step[01]
Scene, camera, loop
Every game starts the same way: a scene, a camera, a renderer and an update function that runs each frame. Get that walking skeleton on screen before you write a single line of gameplay.
Step[02]
Physics and input
Add collision with Cannon.js or Rapier, then wire up keyboard, pointer and gamepad events. This is the point where a moving box starts behaving like a game.
Step[03]
Feel, then polish
Tune the values live with Tweakpane, add post-processing and sound, and test on a mid-range phone. Games live or die on feel, and feel only shows up when you play it.
Learn faster with courses and boilerplates
The interactive Three.js courses take you from a first scene to shaders and game loops, with live code you can edit in the browser. Or start from a working project with a game-ready boilerplate and get straight to the gameplay.
[Courses & kits]
Recommended course
Three.js & GameDev by SimonDev
SimonDev is a former AAA game developer and Google engineer, and his course is the one we point people to when they are serious about games rather than scenes. It goes from the fundamentals through shaders and the maths you actually need, into the production techniques most Three.js material skips.
GPU memory optimisation, infinite worlds, GPU data structures and software design that survives a project growing past a single file.
Who it is for:
- Web developers moving into 3D
- Three.js users who have hit a ceiling
- Anyone aiming at games rather than scenes
Interactive Three.js courses
From your first scene to shaders and game loops, edited live in the browser.
View courses →Game-ready boilerplates
Start from a working project instead of an empty scene.
Browse the marketplace →Play Three.js games in your browser
Every game below is a real production Three.js project from the community showcase, built on the toolchain above. Play one, then open its breakdown to see the tricks and shortcuts the developer used to get it running at frame rate.
[Playable now]
[01]
[02]
[03]Jay Ransijn — An Interactive 3D Game Portfolio
Jay Ransijn’s portfolio is a playable, physics-driven 3D world built with Three.js and Rapier. Explore on foot, ride a bike, drive a car, outrun the police, launch a jetpack, play fetch with Denji, activate music stages, and unlock 13 persistent achievements—all in the browser, with desktop and touch controls.
[04]BTC War
BTC War is a live Three.js crypto-market visualization for nine selectable Binance Spot USDT markets: BTC, ETH, BNB, SOL, XRP, TRX, DOGE, ZEC and ADA. Each market can be rendered independently through six scenes—BTC War, Voxel Siege, Arcane War, Medieval Siege, Space War and Champion Duel—creating 54 valid combinations. Aggregate executed trades and periodically refreshed visible depth drive synthetic BUY/SELL actors and effects. The experience is descriptive, not predictive, and is not a trading signal, consolidated tape or exchange.
[05]
[06]4x4 Builder
4x4 Builder is a browser-based 3D off-road vehicle customization and simulation app. Build your dream 4x4, customize every detail from suspension lift to tire size, then drive it through procedurally generated terrain with realistic physics. Features multiplayer support, VR compatibility, and real-time engine audio synthesis.
[07]
[08]
[09]Pirates in the sea
A 3D open-world pirate adventure built entirely in Three.js. Sail the seas, battle enemy ships with cannon fire, explore tropical islands on foot, fight skeleton enemies, and loot treasure chests. Features dynamic water with caustics, a full day/night cycle, and cloud saves.
[10]
[11].png&w=1536&q=75)
[12]POVIEWIN
The goal for the website wasn't to compete with YouTube or Instagram, but to elevate the POVIEWIN brand into its own digital space. What stands out is how we utilized Three.js to create a dynamic 3D experience right on the frontend. Without relying on heavy video embeds, we used WebGL and interactive 3D to give the site a tactile, cinematic feel that responds to the user. It bridges the gap between standard web design and the high-fidelity driving content we create, serving as an interactive landing pad for our audience.
Built a Three.js game?
Submit it to the showcase and it can appear on this page, with a breakdown of how you made it.
Sponsorship
Support us, grow the community
Three.js Resources is independent and free to use. Take a sponsored slot to help keep it growing, and put your product in front of 200,000+ monthly visitors building 3D on the web.
Get a Sponsor Slot →F.A.Q
Frequently Asked Questions.
Everything people ask about building and playing games with Three.js.
Three.js for games
Whether it is the right tool.
Yes. Three.js is a full 3D rendering library for the browser, and it powers everything from casual arcade games to multiplayer worlds. Combined with a physics engine like Cannon.js and standard browser input events, you can build complete games that run on any device with a modern browser, with no install or app store required.
Three.js is one of the best choices for web-based games. It gives you direct control over WebGL (and WebGPU) rendering with a far friendlier API than raw graphics code, has a huge ecosystem of helpers, loaders, and post-processing effects, and your finished game is instantly playable from a URL. For heavyweight AAA-style projects a dedicated engine like Unity or Unreal may fit better, but for browser games Three.js is hard to beat.
Getting started
Where to begin, and where to play.
Start with the core loop: create a scene, camera, and renderer, then update your game state each frame. If you use React, React Three Fiber with the drei helper library removes most of the boilerplate. Add Cannon.js for physics and collision, and a debug UI like Tweakpane or dat.GUI to tune gameplay values live. Our interactive courses and starter boilerplates cover the full setup step by step.
Right here. The games on this page run in your browser, no download needed. Each one is a real production Three.js project from our community showcase, so you can play it, then study how it was built.
Need a game or interactive built properly?
I build production Three.js work: interactive sites, configurators and WebGL/WebGPU experiences.