Author: The Bugged Dev
Try it live About this project
Anatomy Atelier brings the heart, brain, lungs, liver, kidneys, eye, intestine, pancreas and skin into one searchable nine-organ library. Each entry combines a rotatable, zoomable 3D specimen with structural hotspots, key facts and learning cards, plus tools for cross-sections, layers, isolation and organ comparison.
Exploration continues beyond the model through lessons, simple animated illustrations and quizzes. GLTFLoader and the Meshopt decoder load each asset, while a three-organ cache, prefetching and render-on-demand keep frequent switching responsive.
Highlights
- Search and switch between nine organs: the heart, brain, lungs, liver, kidneys, eye, intestine, pancreas and skin.
- Drag to rotate, scroll to zoom and select hotspots for structural notes, or leave auto-rotate on for a continuous view.
- Use cross-sections to inspect interior structures, switch to a wireframe layers view, or fade the plinth and contact shadow in isolation mode; comparison mode places two organs side by side.
- Move from organ facts and learning cards into lessons and quizzes, extending open exploration with guided study.
Technical breakdown
3D assets · Tripo organ library
Nine organs ship as individual GLB assets whose scene nodes and materials carry Tripo identifiers. GLTFLoader pairs with the Meshopt decoder to load, scale and center every organ in one viewing space, so hotspots and viewer tools can share the same coordinate system.
Viewer interaction · controls and screen-space hotspots
OrbitControls handles rotation, zoom and auto-rotate. Hotspots use screen-space projection for pointer picking, while depth-buffer and facing tests govern visibility without repeated mesh raycasts. Clipping planes provide cross-sections, a wireframe toggle exposes the layers view, and isolation fades the plinth and contact shadow; comparison mode places two organs side by side and adds role and scale details for the current organ.
Loading strategy · three-model cache and prefetch
The asset manager keeps the three most recently used organs and reuses in-flight load requests. Hovering or focusing an organ starts a low-priority GLB prefetch, while switching organs also warms the browser cache for its supporting illustrations.
Rendering and learning · updates on demand
A resident animation-frame loop calls the renderer only for interaction, animation or state changes, so a still scene is not redrawn continuously. React manages search, organ selection, comparison, lessons and quizzes, while GSAP adds a lightweight reveal when the selected content changes.
