Holographic Human Body

Rotate a glowing 3D human figure and click any internal organ — heart, lungs, brain, liver, kidneys and more — to fly in and read a plain-English explainer: what it is, what it does, key facts, and how to keep it healthy. Twenty organs across seven body systems, all in the browser.

Three.js WebGL 20 organs 7 body systems

Launch the 3D explorer How it works

Holographic Human Body — 3D anatomy explorer with glowing clickable organs

Background

🫀 What is the Holographic Human Body?

It’s a stylized, interactive 3D model of the human body rendered right in your browser with WebGL. A translucent holographic figure floats in space with its organs glowing inside. Toggle the skin layer, switch on X-ray, or filter by body system — then click an organ to zoom in and learn about it in clear, everyday language.

It’s built for curiosity and quick learning, not for diagnosis. Think of it as a friendly museum exhibit you can spin around with your mouse.

The flow

01ExploreDrag to orbit the body, scroll to zoom.

02ClickPick an organ or a glowing marker.

03Fly inThe camera flies to the organ automatically.

04LearnRead what it is, does, facts & care tips.

What’s inside

🧠 Twenty organs, seven systems

🧠

NervousBrain and spinal cord — your command center and information highway.

🫀

CardiovascularHeart and the great vessels that carry blood out to the body.

🫁

RespiratoryLungs, trachea, and the diaphragm that powers each breath.

🍽️

DigestiveLiver, stomach, pancreas, and the small & large intestines.

💧

UrinaryKidneys that filter your blood and the bladder that stores urine.

🦋

EndocrineThyroid and adrenal glands — the body’s hormone controllers.

🦴

SkeletalSkull, rib cage, spine, and pelvis that protect and support you.

🔦

X-ray & skin togglePeel away the skin layer or switch to wireframe X-ray mode.

Be honest

⚖️ What it is — and isn’t

✓ Great for

Curious learners, students, and kids exploring anatomy.
Quick, friendly explanations in plain English.
Runs in any modern browser — no install, no plugins.

✕ Trade-offs

Shapes are stylized primitives, not scanned anatomy.
Positions are approximate for clarity, not precision.
Covers major organs, not every structure in the body.

△ Not for

Medical diagnosis, treatment, or clinical training.
A substitute for a doctor or verified reference.
Exam-grade anatomical accuracy.

Educational only. Everything here is a simplified illustration. For anything about your health, talk to a qualified clinician.

Under the hood

📦 How it works

The whole scene is a single WebGL canvas powered by Three.js. Each organ is built from simple 3D primitives (spheres stretched into ellipsoids, tubes for vessels and intestines, torus rings for the rib cage) and given a glowing, semi-transparent material. A translucent body silhouette wraps around them as the “skin layer.”

Ray-casting turns a mouse click into the organ underneath it.
A gentle camera fly-to animation focuses the selected organ.
Screen-space labels track each organ as you orbit.
Everything runs client-side — no server, no data collected.

click-to-select.js

// Turn a pointer click into the organ beneath it
function onPointerDown(event) {
  const rect = canvas.getBoundingClientRect();
  pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(selectableMeshes, false);
  const hit = hits.find(h => h.object.userData.partId);
  if (hit) selectPart(hit.object.userData.partId); // opens the explainer + flies in
}

prompt.txt

Build a single-page interactive 3D "holographic human body" with Three.js
(classic global build, no ES modules, so it works over file://).

- A translucent glowing human silhouette (head, torso, arms, legs) as a
  toggleable "skin layer", with organs modelled inside from primitives.
- Include ~20 organs across 7 systems (nervous, cardiovascular, respiratory,
  digestive, urinary, endocrine, skeletal), each a glowing semi-transparent mesh
  with a pulsing marker and a floating label.
- Clicking an organ (via raycasting) flies the camera to it and opens a side panel
  with: what it is, what it does, key facts, and how to keep it healthy.
- Left panel: filter by body system, toggle labels / X-ray / skin layer, reset camera.
- Neon holographic UI: dark background, scanlines, grid, cyan/green palette.
- Keep it educational and clearly stylized, not a medical device.

🚀 Ready to explore?

Spin the body, peek under the skin, and click your way through twenty organs.

Launch the 3D explorer