# Recreate the Viral 3D Medical Teaching Model in 4 Steps

> Rebuild a classroom-ready 3D anatomy viewer with AI-generated images, 3D reconstruction, GLB compression, and a coding agent.

- Author: AI Kai
- Published: 2026-05-22
- Updated: 2026-08-23
- Topic: AI Dev Tools
- Tags: 3d, medical-education, image-generation, threejs
- Canonical: https://hqman.me/blog/3d-medical-teaching-model-4-steps/

A 3D cell architecture demo by [@DilumSanjaya](https://x.com/DilumSanjaya/status/2053155739389378849) went viral recently. 480K+ views. Interactive 3D organs spinning in the browser, labeled anatomy, classroom-ready UI.

I thought it would be complicated. It is not. The whole thing is a 4-tool AI pipeline: image generation, 3D reconstruction, compression, and code generation.

I rebuilt it in about 30 minutes. Here are the 4 steps.

## Step 1: Generate the flat images

Use GPT Image 2 (via ChatGPT) to generate two images of the organ or cell you want to model.

**Front view (cross-section):**

> A [organ name] 3D teaching model, front view with cross-section showing internal anatomy. White background, 1:1 ratio. Color-coded tissues, clean structure, classroom-friendly style. High-quality 3D render, not photorealistic.

**Back view (complete):**

> The same [organ name] 3D teaching model, back view. White background, 1:1 ratio. No cross-section. Same material, color, scale, and style as the front view. Optimized for multi-view 3D reconstruction.

This works for hearts, lungs, cells, neurons, whatever anatomy you want.

The key is: same scale, same style, white background. That makes the next step much easier.

## Step 2: Generate the 3D model

Upload both images (front + back) to one of these tools:

- [Tripo3D](https://studio.tripo3d.ai/) (recommended, good at multi-view reconstruction)
- [Hunyuan 3D](https://3d.hunyuan.tencent.com) (Tencent's alternative)

Upload the front and back images. The tool will generate a `.glb` file (a standard 3D model format that browsers can render).

Wait a few minutes. Download the GLB.

## Step 3: Compress the GLB file

Raw GLB files from these tools are often 10-30MB. That is too heavy for a web demo.

Use Claude Code or Codex to write a quick compression script. Something like:

```
Compress this GLB file to under 5MB. 
Reduce polygon count, optimize textures, strip unused data. 
Output a web-compatible GLB with tangent data preserved.
```

I got mine from ~15MB down to ~2MB. Good enough for smooth browser rendering.

Tools that also work: [gltf-transform](https://gltf-transform.dev/) CLI, Blender's GLB export with Draco compression.

## Step 4: Build the web viewer

This is where the coding agent does the heavy lifting.

Take a screenshot of Dilum's demo (or mine), and give it to Claude Code or Codex with:

> Recreate this website. Use Three.js to load and display a GLB 3D model. Add auto-rotation, orbit controls, and labeled anatomy info panels. Single HTML file, no build step.

The agent will generate a working single-file HTML page. Drop your compressed GLB file next to it, update the file path, and open it in a browser.

My version: a Biology Anatomy Studio with a heart model, auto-rotation, anatomy labels, comparison panels, and a clean classroom aesthetic. One HTML file. ~1200 lines. Built entirely by Codex from a screenshot prompt.

## What you end up with

An interactive 3D anatomy viewer that runs in the browser. No server, no build system, no React. Just an HTML file and a GLB model.

Students (or anyone) can drag to rotate, zoom in, and explore the anatomy from every angle.

## Source

- Original viral demo: [@DilumSanjaya](https://x.com/DilumSanjaya/status/2053155739389378849)

The whole pipeline is: AI generates flat images -> AI builds the 3D model -> AI compresses it -> AI writes the viewer code. You are connecting 4 tools into one workflow.