Getting Started
The Five Steps
Click any step to open the finished reference version in your browser. Right-click → Save as to download the file.
Get Three.js running and see something on screen. You'll build the three things every 3D project needs: a Scene, a Camera, and a Renderer. Then add a rotating green cube just to prove it works.
Replace the cube with an open world. A large flat plane becomes the ground. A grid overlay makes scale visible. Fog hides the edge so the terrain looks infinite. OrbitControls let you fly around and explore.
Build a tank from boxes grouped together and drive it around. W/S move forward and back, A/D rotate left and right. The camera follows behind. You'll meet delta time - the key to smooth movement on any hardware.
Aim the turret with Q and E, then press Space to fire. Shells live in an array and move forward each frame. A red target box waits to be hit. When a shell collides, the target flashes and moves somewhere new.
Add a second player on the same keyboard. Blue vs red, five hits to win. The camera watches both tanks and zooms out as they separate. Health bars, a win screen, and R to reset - it's a real game.
How to use this tutorial
No install needed
Each file is a single HTML page. Open it directly in Chrome or Firefox - no terminal, no npm, no build tools. Three.js is bundled in the download, so everything works offline.
Build it yourself
The files here are the finished reference versions. The goal is to create your own copy from scratch, step by step. Use these to check your work or get unstuck - not as something to copy straight into a blank file.
Read the README
The download includes a README.md that walks through each step with hints and explanations. Open it in any text editor or on GitHub if you need a push in the right direction.