Human Atlas

A clickable, explodable human body in the browser for students, teachers and curious tinkerers

Open-source 3D anatomy explorer: 2,234 selectable BodyParts3D meshes, system layers, search, and exploded views.

No video published yet. The write-up below covers what the tool does and how to try it.

Category
Applications
Audience
Everyone
Language
TypeScript
Licence
MIT

Published Updated

Human Atlas is a browser-based 3D anatomy explorer that pulls an adult male reference body apart into 2,234 individually selectable meshes. It is aimed at anyone who studies or teaches anatomy — students, nursing and med-school candidates, science teachers, illustrators and 3D hobbyists — and at web developers who want to see how a large anatomical mesh set is wrangled into a React and Three.js app. You click a structure to select it, toggle whole systems on and off, and spread the body into a spaced inventory of every visible piece.

What it does

The README describes the viewer in terms of a handful of interactions, all of them happening in the browser with no account:

  • Orbit, zoom and select structures directly on the body.
  • Toggle individual systems, or jump to a skeleton or organ preset.
  • Move from assembled anatomy to an exploded view that lays out each visible piece without overlap.
  • Search anatomical names and the underlying source identifiers.
  • Isolate one selected structure and read its details in a side panel.
  • Use compact controls and detail panels on a phone.

The headline figures — 2,234 selectable meshes, 15 anatomical systems, 3,432 named concepts — are the project's own counts for the data set it ships, not an independent audit. The live demo the authors link from the README shows all of it running without a local install.

How it works

The front end is React, Three.js and shadcn/ui. The anatomy itself is BodyParts3D 4.0, an adult male reference anatomy released under CC BY 4.0, so the model is licensed data rather than something the project generated. The code is MIT.

Two distinctions matter when you read the interface. A source mesh is not the same thing as a named concept: one concept can group several meshes, which is why the mesh count and the concept count differ. And the descriptions attached to structures separate general system context from explanations of an individual organ, so what you read in the detail panel depends on what you have selected.

Geometry is simplified for browser performance. That is the trade the project makes to keep thousands of meshes interactive in a tab.

There is a real validation story attached, which is unusual for a viewer like this. npm run check, two Node scripts (scripts/validate-atlas.mjs and scripts/validate-interactions.mjs) and a build cover mesh buffers, name and concept membership, non-overlapping exploded layouts at desktop and mobile aspect ratios, search and inspection contracts, and tap-versus-drag handling. The authors state that browser interaction checks have exercised selection, system controls, search, isolation and rotation at 390x844, 320x568 and 844x390 layouts. They also state plainly what has not been checked: performance on physical devices and real multitouch hardware.

Getting started

Nothing here costs money. There is no model, no API key and no account anywhere in the stack — the whole thing is static files and client-side rendering, so the only requirement is a browser that can render the 3D scene with WebGL, as the channel's own note on the project puts it. Beyond that the project doesn't list hardware requirements: no minimum GPU, memory figure or supported-browser matrix appears in the README, and given the untested-device caveat above, an older phone is a guess rather than a promise.

To run it yourself you need Node.js 22.13 or newer, then:

npm ci
npm run dev

The dev server opens on http://localhost:3016. npm run build produces a static site in dist/, which you can drop on any static host — that is how the authors' own demo is deployed. The repository is at github.com/ashemag/human-atlas. If you reuse the anatomy data, remember the CC BY 4.0 attribution that comes with BodyParts3D.

When to use it / when not

The main catch is the data, not the code: this is one reference body. BodyParts3D 4.0 is an adult male, and the README says outright that it does not represent every human structure or variation. The geometry is also decimated for the browser.

Use it instead of the flat, static diagrams in a textbook or an image search when you want to see where a structure sits in three dimensions, lift the surrounding systems away and confirm what you are looking at by name. Don't use it if you need female or paediatric anatomy, anatomical variation, clinical-grade fidelity, or guaranteed smooth performance on a specific tablet you intend to teach from — check the demo on that device first.

Human Atlas is worth taking seriously if you teach or learn anatomy and have been making do with diagrams: it is free, needs no sign-up, and the demo tells you within a minute whether it fits. Developers have a second reason to look — a public, MIT-licensed example of serving thousands of selectable meshes, a searchable concept layer and a workable mobile layout from a single static build, with validation scripts that say what was checked and what was not.

More in Applications

All of Applications →