How is a tablet made? A clickable 3D medicine plant

I wanted to learn how AI can make 3D things. After a first try with a procedural planet, I picked a question from my own work: how is a medicine actually made? Following one batch of film-coated tablets from raw powder in the warehouse to the truck at the door touches regulation, quality control and engineering, and every number in it has to come from somewhere.

I started by asking about Spline, a browser tool for 3D scenes. It is the easiest way to drag things around, but the free plan puts a watermark on embeds, and what it exports is a player for its own scenes rather than 3D code I can edit. Blender is free and far more capable, but it does not make anything clickable on a web page by itself. Three.js, the open-source library underneath many of these tools, does, if someone writes the code. Claude wrote it.

A clickable model of a tablet plant that runs in the browser. Twelve rooms show each stage in order, from receiving and the quality control laboratory through dispensing, wet granulation, fluid bed drying, milling, blending, compression, film coating, blister packing, cartons with serial codes, and batch release. Four more show the systems behind them: cleanroom air handling, purified water, cleaning and changeover, and GMP documentation.

The plant fills the window when it opens. Each room has a small numbered marker on its doorway wall, so nothing covers the machines, and a bar along the bottom starts the guided tour. Open a room and a story column slides in beside it with the stage, a predict-first question, the steps, what operators control, what can go wrong and the sources, while the camera centres the room in the space that is left. The same bar becomes a timeline of the 16 stops. Narration reads each room aloud, the machines get louder as you get close, and a link like /#blending opens a room directly. It says plainly that it is a simplified learning model, not a real floor plan.

• Claude Code Harnesses and agents
• Claude (Opus 4.6 to 5.5) AI models
• Codex CLI Harnesses and agents
• GPT (GPT Image in Codex, GPT-5.5 to GPT-6.1 in Codex) AI models
• Three.js Design and media
• Gemini (Gemini 3.8 Flash and Flash-Lite TTS) AI models
• Mistral (Voxtral) AI models
• Python and uv Code and infrastructure
• Node.js Code and infrastructure
• GitHub and GitHub Pages Code and infrastructure

1. Codex generated a visual concept of the plant first, and I laid out the rooms from it.
2. Claude Code wrote the 3D scene in Three.js, with no build step: 16 clickable stations, the tour, the quiz and the material flow drawn between rooms.
3. A research agent wrote every room's content from 41 sources (US and EU GMP rules, WHO technical reports, ICH guidelines, USP chapters, peer-reviewed papers and trade press) and logged each numeric claim against its source.
4. Codex fact-checked the content independently. Claude checked the decisive findings against the current eCFR text and an FDA letter from August 2026 before applying them.
5. The narration script is written from the same content, voiced in a single Gemini 3.8 Flash TTS take and split into one clip per stop using Mistral's word timestamps. The plant sounds are synthesised in the browser: a building hum, plus one machine sound per room that follows its rhythm, like the press clicking at its punch rate.
6. When the first interface did not convince me, Codex drew three whole-page directions: a workspace, an editorial story and an immersive scene. I combined the immersive opening view with the story column.
7. A built-in self-test checks the content and the interface: every station against its content entry, every source, each quiz answer, that the whole plant fits the screen, that an open room sits centred beside the column, the switches and the narration clips.

• 12 stages and 4 support systems, each with steps, checks, its GMP rule and a predict-first question.
• 42 sources and 75 citations, all present in the sources panel.
• The independent fact-check found 16 problems. Three meant correcting a quiz explanation or its premise, though no quiz answer had to change.
• The self-test passes all 97 checks.
• 17 narration clips from one voice take, about four and a half minutes in all.

The fact-check caught a regulation read backwards. The content said a validated automated system could replace the second person who checks each dispensed container. 21 CFR 211.101 says the reverse: when automated equipment does the weighing, one person checks it. A careful-sounding sentence can still invert a rule, which is why a second model reads the sources again.

Paywalls shape what a model can cite. The current USP-NF is paywalled, so most USP chapters were read from a 2015 edition (USP 38), and the research notes say so; the friability chapter came from USP's free 2023 text. Being honest about the edition is better than citing a version nobody read.

Tweaking a layout I did not like went nowhere. Seeing three whole directions side by side settled it at a glance.

1. 22 Oct 2026

   The first layout did not convince me, so Codex drew three directions. I combined two of them, moved the room markers off the machines and published the plant on GitHub Pages.

2. 22 Oct 2026

   I added narration in one Gemini voice and plant sounds synthesised in the browser.

3. 22 Oct 2026

   A research agent wrote the content from 41 sources. Codex fact-checked it independently and found 16 problems; I applied all 16, and one of them added a 42nd source.

4. 22 Oct 2026

   I built a 3D plant in Three.js with Claude Code: 16 clickable rooms, a guided tour, a quiz and the material flow between rooms, laid out from a visual concept Codex generated first.