First published on Homingo Learn .

Flat isometric boxes look like paper cut-outs. Hand-picking three tones for the top, left and right face of every part works for one box, and falls apart at twenty boxes in five colours: you end up with faces that don't agree about where the light is.

The fix is small. Choose one light direction, measure how directly each of the three visible faces points at it, and derive every tone from that. This tutorial does it in about 30 lines of JavaScript with no libraries.

1. The three faces and their normals

The projection in the listing puts +x running down-right on screen, +y down-left and +z up, so the viewer sits on the high side of all three axes and exactly three faces of a box are ever visible. Each face is described by its normal, the direction it points:

const NORMALS = { top : [ 0 , 0 , 1 ], left : [ 0 , 1 , 0 ], right : [ 1 , 0 , 0 ] };

Enter fullscreen mode

Exit fullscreen mode

The left face looks toward +y, the right face toward +x.

2.…