head

Human Head Atlas

An interactive 3D atlas of the human head and brain built with Three.js. Explore 708 anatomical objects in a light, full-screen workspace, from complete systems to individual structures.

Features

Hierarchical dissection: head → system → region → individual source structures.
Seven systems: brain, skull and teeth, muscles, blood vessels, cranial nerves, eyes, and supporting membranes.
Independent visibility, group opacity, undo, and restore.
Animated assembly and disassembly, with up to 24 individual parts per page.
Search, selection, close inspection, and isolation.
Free rotation, camera presets, zoom, and automatic exploration.
Anatomical colours, porcelain, wireframe, and transparent display modes.
Adjustable sagittal, axial, and coronal clipping planes.
Model PNG export and browser fullscreen support.
A guided tour of the cortex, deep structures, vessels, and cranial nerves.

Open the atlas

Download human-head-anatomy.html and open it in a modern browser with WebGL enabled. The file includes the application and model data, works offline, and needs no installation or server.

The standalone file is approximately 30 MB. Detailed geometry may be demanding on older devices.

Controls

Action	Control
Rotate	Drag the model
Zoom in Dissect mode	Mouse wheel, pinch, or + / −
Assemble / explode	Bottom slider or Shift + mouse wheel
Explore a smaller group	Click its name in Layers & parts or its model label
Hide a group or part	Toggle its switch
Inspect a structure	Click the model or a search result
Change materials or clipping	Display
Focus search	`/`
Fit the model	`F`
Dismiss details and display settings	`Escape`

Dissect supports exploration at any level of the hierarchy. Guided tour presents a four-stage anatomical journey. Reset restores visibility, display settings, and the initial view.

Build from source

Requires Node.js 22.13 or later and pnpm 11.

git clone https://github.com/bubblik525/head.git
cd head
pnpm install --frozen-lockfile
pnpm test
pnpm build

The build produces human-head-anatomy.html. No adjacent projects or machine-specific paths are required.

Project structure

File	Purpose
`main.js`	Three.js scene, interaction, guided tour, and display controls
`dissection.js`	Hierarchical exploration, visibility, and animated layouts
`hierarchy.js`	Anatomical display groups and layout logic
`atlas.js`	Geometry decoding and materials
`shell.html`, `style.css`	Interface markup and styling
`data/atlas.json`	Quantized atlas geometry
`data/manifest.json`	Source names, hashes, metadata, and transformations
`data/export.mjs`	Optional regeneration from upstream FBX models

Tests validate geometry indices, source identifiers, cranial nerve pairs, hierarchy membership, visibility history, and layout spacing.

Optional geometry regeneration

Processed data is included; source models are not needed to build or use the atlas. To regenerate the data, place the four FBX files listed in data/manifest.json in data/raw/, then run:

pnpm export:atlas
pnpm test
pnpm build

Raw FBX files are excluded from Git.

Anatomy and attribution

Geometry is adapted from Z-Anatomy, derived from BodyParts3D, with 708 selected source objects and approximately 2.24 million triangles. All systems retain a shared source coordinate frame when assembled. Adaptations include head selection, neck clipping, quantization, corrected triangle winding, and display materials.

Exploded layouts normalize group sizes for inspection; their spacing and relative scale are illustrative. The hierarchy is an editorial organization of source meshes. Some objects represent spaces, landmarks, or multiple branches rather than separate organs.

Adapted geometry is CC BY-SA 4.0. Full credits and third-party licence notices are in ATTRIBUTION.md.

Interaction reference: Human Atlas by ashemag. This head-specific hierarchy and controller are independently implemented.

This is an educational visualization of a representative adult atlas, not a patient scan or a clinically validated tool. Fine branches and individual variation are incomplete. Clipping planes create open surfaces, not medical image slices or surgical instructions.

Interface and interaction: @kirallik.