How One Developer Built a 3D Human Anatomy Web App with AI, Drawing 1.6 Million Views
Using GPT‑5.6 Sol, Codex, and Three.js, a solo developer transformed AI‑generated 2D organ sketches into an interactive 3D anatomy web app, compressing assets from 900 MB to 28.6 MB, adding on‑demand loading, and demonstrating how generative AI can lower the barrier to creating educational 3D content.
Project Overview
Anatomy Atelier is an interactive 3D web application for human anatomy learning. It displays organ models, knowledge cards, and interactive controls on a single page, allowing rotation, zoom, hotspot clicks, organ isolation, cross‑section view, layered display, organ comparison, and reset view. The interface includes organ search and navigation tabs (Systems, Lessons, Library, Notes).
Currently includes nine organ categories: heart, brain, lungs, liver, kidneys, eyes, intestines, pancreas, skin. Each organ page provides size, weight, location, blood supply, function, microscopic structure, functional animation, disease information, and system affiliation (example: heart page).
Development Workflow
Started from a design sketch. Used GPT Image 2.0 to generate visual concepts, then created 2D organ illustrations based on those concepts. The 2D images were fed to Tripo, which converted them into web‑ready 3D models.
All assets, the design sketch, and the 3D models were supplied to Codex with a comprehensive prompt. Codex, powered by GPT‑5.6 Sol and Three.js, generated the front‑end code, interactive hotspots, and anatomical placement diagrams, producing the first functional version.
Performance Optimization
Initial 3D models sized 120–150 MB each, total ~900 MB, causing deployment difficulty and ~16 fps frame rate.
Through iterative optimization Codex compressed each model to 2–5.5 MB, preserving visual quality. Total asset size reduced to 28.6 MB (≈97 % reduction). An on‑demand loading mechanism was added so only the selected organ model is fetched, making the app viable for browsers.
Key Observations
The process was incremental: visual design → 2D illustration → 3D conversion → front‑end generation → performance tuning. Decomposing the goal allowed a single developer to produce a classroom‑grade educational tool without a team of designers, 3D artists, or front‑end engineers.
Resources
Application URL: https://anatomy-livid.vercel.app
Source repository: https://github.com/thebuggeddev/anatomy
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.