• Open starter.html and save it with a new name - for example step1.html. This gives you the HTML structure and importmap already set up so you can focus on the Three.js code.
• Write a <script type="module"> that creates a Scene, a Camera, and a Renderer
• Add a BoxGeometry cube to the scene with a green MeshBasicMaterial
• Write an animate() function that rotates the cube and calls renderer.render()
• Call requestAnimationFrame(animate) inside animate to loop it

Your cube should look different from the reference. Change the colour, the size (the numbers in BoxGeometry), the rotation speed, or the rotation axis. Try rotating on Y instead of X, or on both axes at once.

• Remove the cube
• Add a large PlaneGeometry (try 1000 x 1000) - remember to rotate it flat with terrainGeo.rotateX(-Math.PI / 2)
• Add a GridHelper on top of it (raise it slightly with grid.position.y = 0.01)
• Set scene.background to a sky blue colour
• Add scene.fog = new THREE.Fog(skyColour, 100, 450) to hide the horizon
• Import OrbitControls from three/addons/controls/OrbitControls.js and add them so you can click-drag to look around

Change the sky colour, the terrain size, the fog distance, or the grid colour. A closer fog makes the world feel small and enclosed; a further one makes it feel vast.

• Remove OrbitControls
• Write a createTank(bodyColour, turretColour) function that returns a THREE.Group containing three boxes: hull, turret box, and barrel (the barrel should be positioned at z = -1.2 inside its own sub-group, the turretGroup)
• Add keyboard input: listen for keydown and keyup, storing state in a keys = {} object
• In your animate loop, use tank.translateZ(-speed * dt) for W/S and tank.rotation.y += turnSpeed * dt for A/D
• Get delta time with const clock = new THREE.Clock() and clock.getDelta() each frame
• Move the camera behind the tank each frame using camOffset.applyEuler(tank.rotation)

Change the tank colours, the hull and turret proportions, the movement speed, the turn speed, and the camera distance behind the tank.

• Add Q/E to rotate tank.turretGroup.rotation.y
• Fire a shell on Space: create a SphereGeometry, set its position using tank.turretGroup.localToWorld(new THREE.Vector3(0, 0.05, -2.0)), and set mesh.rotation.y = tank.rotation.y + tank.turretGroup.rotation.y
• Keep an array of active shells; move each one with translateZ(-speed * dt) each frame
• Add a red BoxGeometry target somewhere on the terrain
• Use new THREE.Box3().setFromObject(target) and box.containsPoint(shell.position) to detect hits
• On hit: flash the target, increment a score counter in the DOM, respawn the target
• When a shell expires or hits, call scene.remove(mesh) and mesh.geometry.dispose()

Change the turret rotation speed, the shell speed, the shell size, and the target colour and size. Try making the target move to a new position after each hit.

• Call createTank() twice with different colours (e.g. blue and red)
• Define a player object for each: { tank, hp, maxHp, barEl, keys: { forward, backward, ... } }
• Write a single updatePlayer(player, dt) function that reads from player.keys and moves player.tank - then call it for both players each frame
• Each shell needs an owner property so it only checks collision against the opposing tank
• Add two <div> health bars to the HTML; update their style.width on hit
• Add a gameOver flag; when hp reaches 0, show a win banner and stop updating tanks until R is pressed
• Write a resetGame() function that sets both tanks back to their start positions and resets all state
• Replace the single-tank follow camera with one that watches the midpoint between both tanks and pulls back based on their separation distance

Change the player colours, the starting positions, the number of hits to win, and the health bar colours. No two students' finished games should look identical - that's how you know it worked.