Building Umbra: A Three.js Shadow Puzzle That Teaches Spatial Reconstruction

Building Umbra: A Three.js Shadow Puzzle That Teaches Spatial Reconstruction

A drawing-class game for the hardest skill in engineering visualization — building a 3D object back from its 2D projections.


I teach engineering drawing. The hardest skill to transfer isn't drawing.

Students figure out fairly quickly how to project a 3D object into its three orthographic views — front, side, top. The geometry is mechanical: stand here, look that way, draw what you see. It's the opposite direction that breaks people. Hand a student three flat silhouettes and ask them to describe the object that made them, and you can watch them spend ten minutes guessing wrong before something clicks.

Umbra is the puzzle game I built to make that "click" happen on purpose.

Play Umbra here — it runs in any modern browser. Ten levels, three difficulties, one HTML file you can email to a student.

Who this is for

The audience is anyone who thinks in projections, or wants to. Engineering students learning descriptive geometry. Drafting and CAD students still building their internal 3D library. Architects and product designers in the early stages of training. Or anyone who likes spatial puzzles for their own sake and has never met one designed specifically around the inverse projection problem.

How the game works

You're inside a dark chamber. You can orbit it but barely see what's there. Three small windows in the corners — labelled FRONT, SIDE, TOP — show the shadows your invisible sculpture is casting on the chamber walls. Your job is to arrange cubes, spheres, cylinders, and cones inside the chamber until all three shadows match their targets at the same time. When they do, the chamber lights up, rotates, and the tangled mass of polyhedra resolves into three crisp icons.

The core idea

The pedagogy is simple. If a student builds a sculpture in the chamber and the shadows it casts match three target silhouettes, they have, by construction, solved the inverse projection problem. There is no way to win the level without internally modeling the 3D object first. The game is the assessment.

Everything else followed from that one insight. The game had to be frictionless — no install, no account — because friction kills classroom adoption. The shadows had to look real, not pixelated, or the puzzle would be about pixels instead of geometry. The "top view" had to look the way drawing students expect it to look, not the way a math textbook describes it. The win threshold had to be tight enough to feel earned but lenient enough to feel solvable.

These are all small decisions. But every one of them comes from thirty years of watching students struggle, not from a game design textbook.

The moment the puzzle becomes a teaching tool

The reason for building this is a moment that happens inside the player's head, not on the screen.

You stare at the chamber for a minute. The shapes don't make sense. Then something rotates internally — you imagine the object from above and predict what its top shadow should be, without rendering it on screen first. The mental model is doing the work the engine used to do.

That's the pedagogical payoff. The student who has been guessing for ten minutes stops guessing. They build something in the chamber, and they already know what shadow it will cast, because they've built the same object in their head first.

The game becomes too easy at that point.

Which is the point.

What this is

Umbra is a puzzle game and it's a teaching tool, and a small argument that the second of those can be smuggled inside the first.

The whole thing ships as a single HTML file you can email to a student. No store. No installer. No update prompt. Open it in a browser, try to make the shadows match, and when they do, the chamber rotates and the tangled mass of polyhedra resolves into three crisp icons.

The technology was just whatever it took to put that moment in a browser tab.

Coming next

A tutorial article and YouTube video are in production: a walkthrough of how I built Umbra with AI coding agents, from the first sketch to the final HTML file. If you want to see the workflow that turns a teaching idea into a working browser game in a few days — subscribe and it'll be the first thing you receive.

Stay in the loop

Get notified when new simulations, tools, and technical deep-dives are published.