Building your own 3D body map, or licensing one
A rotating body with clickable regions is a two-week prototype and a six-month product. This is where the other five and a half months go.
Published September 16, 2026 4 min read
Any competent frontend developer can load a GLB in Three.js, add an orbit control and raycast a click onto a mesh. That is genuinely a couple of days, and the demo is impressive enough that someone will say “we could build this ourselves”.
They are right, and that is the trap. What gets underestimated is the gap between that demo and something you would put in front of paying customers. This page lays that gap out honestly, from having built it.
The two-week version
You will get here fast, and it will feel like most of the work: load a GLB with GLTFLoader, wire up OrbitControls for rotation and zoom, raycast the click onto whatever mesh is under the cursor, swap in a highlight material, then fire a postMessage with the result.
Genuinely a good weekend. Then the list starts.
Where the time actually goes
The model itself
You need an anatomical model that is accurate enough not to embarrass you, licensed for commercial use, and segmented into named regions.
That last requirement is the one that hurts. Most purchasable anatomical models are one mesh, or split for rendering convenience rather than semantics. Turning one into region-addressable geometry means a 3D artist sitting in Blender separating surfaces and naming them. For 23 broad regions that is tedious. For 158 detailed zones with consistent naming across two body models, it is a project.
Then it has to be small enough to load on a phone on mobile data, which means decimation, Draco compression, and checking that the decimation did not destroy the zone boundaries you just spent weeks creating.
Hit testing that does not annoy people
Raycasting onto a mesh is the easy version. The problems appear at the edges.
A thumb on a phone is not a mouse pointer, so a naive raycast misses constantly on narrow regions. Clicks land on the back of the model through a gap. Fingers hit the boundary between two zones and get whichever one the geometry happened to favour. A rotation gesture that ends with a small movement registers as a click.
Each of those is a small fix. Together they are the difference between “the demo works” and “my customers are not complaining”.
Mobile performance
WebGL on a mid-range Android phone from three years ago is the constraint, not your laptop. Draw calls, texture sizes, the cost of the highlight pass, and the memory ceiling that shows up as a blank canvas rather than an error.
You will also learn that devicePixelRatio on some devices will happily ask you to render four times the pixels you need, and that the fix is a clamp you have to discover.
Localisation
Zone labels in one language is a feature. In twenty-seven it is a data problem: consistent anatomical terminology, per-language review, and a fallback chain when a key is missing. Anatomical terms are not forgiving of casual translation, and a wrong body part label in a language nobody on your team reads will sit there for a year.
Accessibility
A canvas is opaque to screen readers. If you need a keyboard-navigable or screen-reader-usable path to the same information, that is a parallel non-visual interface listing the same regions, kept in sync with the model. Not hard. Just the kind of thing nobody remembers until a customer asks.
The embed boundary
If the map is going on someone else’s site, you now own an iframe contract: a versioned message envelope, origin validation, configuration through URL parameters, a theme sync path, and a story for what happens when the parent page is on an old version of your protocol.
This is the part that never appears in the estimate. Browser updates change WebGL behaviour. New phones arrive with new quirks. iOS Safari does something interesting roughly once a year. A 3D component is not a thing you ship and forget, and the team that built it moves on to other work.
Side by side
| Build in house | License | |
|---|---|---|
| Working prototype | 1 to 2 weeks | One afternoon |
| Production ready | 3 to 6 months, realistically | Same afternoon |
| Anatomical model sourcing | Yours to license and segment | Included |
| Zone segmentation and naming | 3D artist time | Included, 23 or 158 zones |
| Mobile performance tuning | Yours | Included |
| Localised zone labels | Per language, yours | 27 languages included |
| Ongoing browser and device maintenance | Yours forever | Included |
| Full control over look and behaviour Config covers most of it | Yes | Partly |
| Runs with no external dependency | Yes | No |
| Cost shape | Engineering time up front | From EUR 9.99 per month |
Build it if
The body map is the product, or the thing that makes your product different. If you are selling an anatomy education tool or a clinical assessment platform, the interaction model is your differentiator and you should own every pixel of it.
You need behaviour no configuration will give you. Custom overlays, multi-select heat maps, your own anatomical taxonomy, animation tied to your data.
You cannot take a third-party runtime dependency for policy reasons. Some healthcare and public sector procurement rules settle this before anyone looks at a feature list.
You have Three.js depth in house and slack in the roadmap. Not “we could learn it”. Someone who has already shipped WebGL to production and has time.
License it if
The body map is a feature on the path to a checkout or a form submission. It matters, but nobody buys from you because of the shader.
You want it live this quarter. The gap between an afternoon and a quarter is the entire argument.
Your team’s scarce skill is not WebGL. Most commerce and clinic teams are strongest in the platform they already run, and a 3D component is a detour.
You would rather pay for the maintenance tail than staff it. At EUR 9.99 a month, the comparison is not close for anyone whose developers cost more than that per hour.
Embed a licensed widget now and keep your routing logic on your side, behind the zone-selected event.
If you later decide to build your own, the zone keys are just strings. Swap the component, keep the
mapping. That is a week of work instead of a rewrite.
What we would tell a friend
If a clickable body is a line item on a roadmap with eleven other line items, license it. The prototype will look done and then eat a quarter.
If a clickable body is the reason your product exists, build it, budget six months, and hire a 3D artist before you hire another frontend developer. The model is the hard part, not the code.
You can run the licensed version unlicensed, with a watermark, for as long as you like. Build the whole integration, decide afterwards. Open the demo or read the quick start.