← Back to the main page
Treaducation
Code & Learn - A Treads of War Tutorial

Five steps. One working tank game. No prior experience needed.
You write every line yourself - no copy-paste, no shortcuts. Each step introduces a handful of new ideas, and by the end you have a real two-player 3D game running in your browser.

Download all files Teacher's guide Try in Playground

Thanks to Samuel and his class, my main play-testers

Getting Started

00
Instructions

Start here. How the tutorial works, what to expect from each step, and a plain-English guide to colours, coordinates and radians before you write a single line of code.

Read first Colours Coordinates Radians

The Five Steps

Click any step to open the finished reference version in your browser. Right-click → Save as to download the file.

01
Hello World

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.

Scene / Camera / Renderer BoxGeometry Animation loop requestAnimationFrame
02
Flat Terrain

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.

PlaneGeometry GridHelper Fog OrbitControls
03
Tank & Controls

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.

THREE.Group Keyboard input translateZ Delta time Follow camera
04
Shooting

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.

Turret rotation Projectile array localToWorld Box3 collision scene.add / remove
05
1v1 - The Full Game

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.

Factory function Player data objects Dynamic camera Health / win state DOM HUD

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.