GLB Hotspot Annotation Viewer — Free Three.js glTF Screen-Space Marker Snippet

Annotating a 3D model with labeled hotspots means solving one core problem: keeping a flat, clickable 2D marker glued to a specific 3D point on the model as the camera orbits and zooms around it. This snippet solves that with camera.project(), converting each hotspot's fixed world-space position into normalized device coordinates every single frame, and positioning a real absolutely-positioned <div> there — genuine, accessible, styleable DOM elements, not a canvas-drawn overlay.

Defined in local space, converted once the scale is known

Each hotspot in HOTSPOT_DEFS is authored as a local coordinate — a point relative to the model's own unscaled geometry, easy to eyeball from the source asset's proportions. Once the model loads and its auto-fit scale factor is computed, buildHotspots() converts every local point into a fixed world-space Vector3 exactly once, multiplying by that same scale factor and adding the model's final grounded position — so a hotspot always tracks the same physical point on the model regardless of how large or small the auto-fit ends up making it.

`camera.project()`, recomputed every frame

Inside the render loop, updateMarkers() calls .project(camera) on each hotspot's stored world position, which returns normalized device coordinates in the [-1, 1] range for x and y. A short conversion maps that into actual canvas pixel coordinates, and the marker's <div> gets its left/top CSS set directly — recomputed fresh every frame, so dragging to orbit or zooming with the slider or Ctrl/Cmd + scroll all keep every marker glued exactly where it should be with zero lag.

A simple occlusion check, not a full raycast

projected.z > 1 after projection indicates the point has gone behind the camera's near/far range from this viewing angle — the marker's opacity is set to 0 and its pointer-events disabled in that case, so a hotspot on the far side of the model doesn't sit visibly (and clickably) on top of it. This is a lightweight heuristic, not a full raycasted occlusion test against the model's own geometry, but it's enough to keep markers from feeling obviously wrong.

Real DOM, real accessibility, real info cards

Because markers are genuine <div> elements layered in a position: absolute container over the canvas, they support real click listeners, hover states, and focus — clicking one opens a styled info card anchored to the corner of the viewer with that hotspot's title and description, closable independently of which marker triggered it.

A named, honest fallback if the model fails

If the .glb can't load, a simple box placeholder is built and run through the exact same buildHotspots() function, so the four hotspots still appear (in slightly less meaningful spots) and remain fully clickable.

Zoom is opt-in, not a hijacked scroll wheel

OrbitControls' built-in wheel-zoom is turned off, with zoom reimplemented as a slider plus Ctrl/Cmd + scroll, so a plain scroll over the card always scrolls the page.

Customizing it

Adjust each hotspot's local coordinate to point at different features, add more entries to HOTSPOT_DEFS, or pair this with GLB exploded view assembly toggle to label parts once they're pulled apart.