Three.js with Claude Code: the maths barrier is gone

Table of contents (5 sections)

I wanted a very simple Christmas card for this site: a cat perched on top of a tree, in the snow. I had it built by Claude Code, Anthropic's coding assistant, which reads a project's files and edits them itself. The AI behind it is called Claude. The card uses Three.js, a ready-made code toolbox that draws 3D in a web page.

The cat landed on its tree without me writing a single line of geometry. So I kept going: a fireplace, a Santa who falls into it and burns his backside, a jukebox, a little train. Two days later, the simple card had become Star Cat, a whole living room full of surprises.

3D is scary for one reason: it takes maths. Vectors, angles, rotations, everything that makes you close the tutorial at chapter two. The AI gets over that wall for you. What is left for you to do is a lot more fun, and here is how I went about it.

Star Cat ended up with three little sisters in the site's 3D Lab, built the same way. Each one launches in one click, on a computer or a phone. Only Star Cat has an English interface, the Lab page and the other three scenes are in French.

A simple card, two days of Easter eggs

The hard part, with an AI that codes fast, is stopping. Every idea fit in one sentence, and every sentence turned into a gag that worked. So I hid nods to Christmas films all over the room:

• Gremlins: Gizmo sits on the floor like a plush toy, with a plate and a glass of water next to him. In the film, you never get him wet and never feed him after midnight, or disaster follows. Feed him anyway.
• Home Alone: a bottle of aftershave waits on the mantel. Touch it, and the cat slaps its paws on its cheeks and screams like Kevin. It also sets traps for the Christmas bogeyman, battle plan included.
• The Nightmare Before Christmas: touch the pumpkin, and Jack's coffin sleigh is the one that flies past the window. A cursed present then comes down the chimney.
• The Grinch: when nobody touches anything, a long green hairy arm snakes out of the hearth to steal presents. Catch it in time, and a heart grows three sizes in the flue.

A notebook counts the surprises you have found, and the room hides dozens of them. I won't give them all away.

I timed a nativity scene to a South Park episode

At the foot of the tree there is a home-made nativity scene. Its eight figurines are woodland critters: a deer, a bear, a beaver, a fox, a rabbit, a raccoon... It looks adorable. In a South Park episode, these same critters celebrate Christmas while secretly awaiting the birth of the Antichrist.

Touch it, keep at it, and it gives itself away. The lights dim, the eyes turn red, the choir starts and a devil's tail rises from behind the cradle. Then Santa walks in, just like in the episode, and he has brought his shotgun. The soundtrack is the episode's clip, from the French dub.

I wanted that gag to land right on the episode's rhythm. The gunshots were found on the clip's waveform, the drawing of the sound where every loud noise makes a peak. Then we listened to the clip, tapping a finger on every shot, to check. The gunshots fit on one line: each number is one shot, in seconds from the start of the clip.

// seconds into the clip: peaks found on the waveform, confirmed by tapping along
const RAMPAGE_BLASTS = [4.58, 6.66, 7.75, 8.24, 13.63, 17.39, 18.88, 23.47];

Claude wrote the critters, the lights and the animation. My job was the ears: does each critter drop right on its gunshot? That is where I understood how to work on 3D with an AI.

My workflow: one sentence, one screen, several sessions

Every gag followed the same path, from start to finish:

1. One sentence. I describe the idea the way I would tell a friend: "when you touch the aftershave, the cat does Kevin's scream". No coordinates, no formula. Claude writes everything, geometry included. The scream is not even a recording: Claude built it in code, a child's shaky "Aaaah".
2. Claude checks on its own. It opens the page in a browser it drives itself, and looks at the result before handing it back. I explained in another article how to give Claude Code a browser.
3. I watch the screen. I play with the scene, I turn the camera, and I send back a screenshot or a sentence when something is off.
4. Several sessions in parallel. A Claude Code session is a working conversation with Claude, which only knows the files it has read. I had several open at once, each on a different gag.

Several sessions on one project is several cooks in one kitchen. Two rules made that pace workable.

The first one is about how the code is organised. Each gag lives in its own file: gizmo.js, voleur.js, creche.js. Plugging it into the scene takes one line in three places. The first is the animation loop, the code that redraws the whole scene on every frame. The other two are the surprise notebook and the sounds. A session that adds a gag barely touches the others' work.

The second one is written in the project's CLAUDE.md, an instruction file Claude Code reads at the start of every session. It says: "edit by exact replacement, never rewrite a whole file". In other words, only change the lines you mean to change. A session that rewrites a whole file starts from its own copy, and that copy may predate another session's work. It happened once despite the rule: a fix vanished, most likely overwritten that way, and had to be redone.

The AI types the maths of Three.js

Before I wrote code, I taught maths and physics, so I was watching for formula mistakes. What surprised me most is that the ones I saw were right. A falling hat, the sloped surface of a tree, the curve that softens lights that are too bright: Claude got those formulas right.

What the AI gets wrong is which object it applies the formula to. The Santa gag is the perfect example. He falls into the fireplace, burns his backside and shoots back up the flue like a rocket. His hat falls back down from the top of the room, spins, and ends up half sunk into the floor.

In Three.js, every object has an origin: a single point. When the code says "put the hat there", that point is what lands there, and the rest of the object spreads out around it. Claude stopped the fall when the hat's origin got just above the floor. But that origin sits in the middle of the hat, so its bottom went through the boards. The fix stops the fall a little higher and lays the hat on its side: its brim finally rests on the floor.

The falling formula was right. What Claude was missing was where the hat's origin sits, and no calculation told it. That kind of defect has to be seen on screen, then named with the right word. "The hat goes through the floor because its origin is in the middle": with that sentence, Claude knows exactly what to fix.

The maths changed hands

I wanted a simple card. I ended up with a living room haunted by gremlins, devilish critters and a green arm that steals presents. The maths wall is down: the AI types the formulas for you.

What is left to do is look. You need to see what is off, then name it with a few precise words: origin, rotation, scale. Those words are quick to learn when you watch them move on screen. That is what I put into the course Three.js through maths: seven lessons, each with its own demo to play with. The chapter Translate, rotate, scale: matrices shows exactly that origin point, which is also the pivot when the object turns.

Start the way I did, with one sentence. Mine was: "a cat perched on top of a tree, in the snow". Then see where it takes you.