Students create a blank HTML file and get a rotating green cube on screen. This is the hardest step emotionally - starting from nothing is daunting. Once the cube appears, confidence jumps sharply.

• Scene - the container that holds everything in the 3D world
• Camera - the viewpoint we look through
• Renderer - the engine that draws the scene onto the screen
• Animation loop - a function that runs ~60 times per second and redraws the scene

• Forgetting to append the renderer to the page body - the canvas exists but is invisible
• Missing or broken importmap - Three.js won't load, everything fails silently
• Not calling requestAnimationFrame inside animate - the cube appears but doesn't move
• Camera still at 0,0,0 (inside the cube) - screen appears solid green

• "What would happen if we removed the animate() call at the bottom?"
• "Why do we need all three things - scene, camera, and renderer? What does each one do?"
• "What would you change to make the cube red instead of green?"

The cube is replaced with an open landscape - a flat plane, a grid overlay, a sky colour, and fog that hides the edge. OrbitControls let students fly around. This step is short and satisfying.

• PlaneGeometry - a flat surface that acts as the ground
• Fog - fades objects to the background colour with distance, hiding the world edge
• OrbitControls - an add-on that lets the mouse rotate, pan, and zoom the camera

• Forgetting to rotate the plane - PlaneGeometry starts vertical like a wall, not flat like a floor
• Fog colour different from background - leaves a visible hard edge at the horizon
• OrbitControls import path wrong - Three.js add-ons need a slightly different path than the core library

• "Comment out the fog line. What changes? Why might we want fog in a game?"
• "What does OrbitControls actually do? What controls it - the library or your code?"
• "How would you change the sky to sunset orange?"

The longest step. Students build a tank from three grouped boxes, add keyboard controls, and get the camera to follow behind. The key concept - delta time - is introduced here and is worth spending time on.

• THREE.Group - a container that holds multiple objects so they move together
• Keyboard events - listening for keydown and keyup to track which keys are held
• translateZ - moves an object along its own forward axis, regardless of which way it's pointing
• Delta time - the time since the last frame; makes movement speed consistent across different hardware

Without delta time, a game runs faster on a fast computer and slower on a slow one. Delta time fixes this: instead of moving 1 unit per frame, the tank moves 10 units per second, and each frame it moves 10 * dt. A fast machine takes many small steps; a slow one takes fewer but larger ones. The result is the same.

• Not calling clock.getDelta() every frame - movement stutters or stops
• Camera position updated once at setup but not each frame - camera stays still while tank moves
• Barrel position inside the group wrong - pokes through the hull or floats above it
• Keys object declared in the wrong scope - keydown event can't find it

• "Why does translateZ always move forward, even when the tank is pointing sideways?"
• "How would you make the tank move faster? Slower? Turn faster?"
• "What would happen if you forgot to update the camera position every frame?"

Students add turret rotation, a firing mechanic, and a target that reacts to being hit. This step introduces arrays of moving objects and collision detection - two patterns that appear in almost every game ever made.

• Projectile array - an array that holds all active shells, updated every frame
• localToWorld - converts a position inside a group (the gun barrel tip) to a world position
• Box3 collision - a bounding box used to test whether a point is inside an object
• scene.remove and geometry.dispose - cleaning up objects that are no longer needed

When removing items from an array while looping through it, looping forwards causes bugs: removing item 3 shifts item 4 into position 3, and the loop skips it. Looping backwards avoids this - removing an item only affects indices below the current position, which have already been processed.

• Iterating the shells array forwards when removing - causes every other hit to be missed
• Shell spawned at the tank body position rather than the barrel tip - shells appear inside the tank
• Shell rotation not set to match the tank - shells fly sideways
• Target bounding box not updated after moving - collision still uses the old position

• "What happens if we never remove shells from the array? Try it and watch the console."
• "How is this collision detection different from a real physics engine? What can't it do?"
• "What would you change to make the turret rotate faster?"

A second player is added, health bars appear, and the game now has a win condition and a reset. This step introduces factory functions - one of the most important ideas in programming - and a dynamic camera that watches both players.

• Factory function - a function that creates and returns a new object each time it's called; call it twice to get two tanks
• Player data objects - grouping everything about a player (tank, health, keys) into one object that gets passed around
• Game state flags - a simple variable like gameOver = true that changes what the update loop does
• Reset function - a function that puts everything back to its starting state
• Dynamic camera - finds the midpoint between both players and pulls back as they separate

Tell both players the controls before they start - it is easy to miss that P2 uses the arrow keys and Enter, not WASD and Space.

• Player 1: W/S drive, A/D turn, Q/E aim turret, Space fire
• Player 2: Up/Down drive, Left/Right turn, Comma/Period aim turret, Enter fire

• Shells hitting their own owner - need to store which player fired each shell and skip that player on collision check
• Reset function incomplete - some state resets but others don't, causing strange behaviour on the second game
• Both players using the same keys object - one player controls both tanks
• Health bar width not clamped - can go below 0% on edge cases

• "What is a factory function? Why is it better than writing createTank() code twice?"
• "How would you add a third player? What would you need to change?"
• "What would a reload timer look like? Where would you add it?"