Freelance / Research · 2023
Atlas 3D
Interactive anatomy atlas for a textbook
Browser based 3D anatomy atlas built for a medical school textbook: students rotate and zoom real bone models with labels anchored to the geometry.
Technologies: Next.jsthreejsreact-three-fiberframer-motion
Overview
Atlas 3D is a web anatomy atlas that renders human skeletal models in the browser with Three.js through react-three-fiber. Students rotate, zoom and pan around each bone while annotation overlays show anatomical names anchored to specific 3D coordinates. It was built as the interactive companion to a printed textbook for an anatomy department at a medical school.
The problem
A friend writing that textbook had a limitation no amount of illustration solves: a bone is a three dimensional object and a page shows one angle of it. Students memorize the drawing instead of the shape, and then fail to recognize the same bone from another view.
He needed something students could open next to the book, turn around in their hands and read labels off, without installing anything and without technical knowledge.
Decisions
- react-three-fiber inside Next.js instead of raw Three.js: the scene is composed declaratively as React components, so the annotations and the UI live in the same model as the 3D content.
- Annotations bound to 3D world coordinates, not to screen positions: labels stay on the right part of the bone through every rotation and zoom level, which is the whole point in an academic context.
- Progressive level of detail on model loading: the first render arrives fast on a student laptop and detail comes in afterwards, instead of a long blank wait.
- Draw calls profiled and optimized to hold 60 fps on mid range hardware: the target device was a student's laptop or phone, not a workstation.
- Touch gestures as a first class input: pinch to zoom, two finger rotation and swipe between bones, because most of the studying happens on a phone next to the book.
- Framer Motion only for the interface transitions between the catalogue and each bone detail: the 3D canvas is left alone.
Result
The atlas is online and works as the companion to the book: any student opens a bone, turns it and reads the labels on the real geometry, from a laptop or a phone.
It was also my first sustained project with a non technical client, and that taught me as much as the rendering did: gathering requirements from an anatomist, showing progress with demos instead of jargon, cutting a complex project into milestones, and deciding when to push back on a request. I met those ideas formally in software engineering courses later, with the practice already done.