GLB AR-Style Pedestal Viewer — Free Three.js glTF "Placed Object" Snippet

Real mobile AR product viewers use a specific visual vocabulary to say "this object is anchored in your space": a soft contact shadow, a subtle ring or reticle under the object, and a small status indicator confirming placement. This snippet borrows that exact language for a plain desktop/web 3D viewer — no camera permission, no WebXR session, no device motion required — by presenting a real loaded .glb model resting on a pedestal with all three of those cues built from ordinary Three.js primitives.

A canvas-drawn radial gradient instead of a real shadow map

Real-time shadow mapping is overkill for a simple "this sits here" cue. Instead, a small offscreen <canvas> is drawn once with a radial gradient — dark near the center, fully transparent at the edge — turned into a THREE.CanvasTexture, and mapped onto a flat circle positioned just above the pedestal's top surface. It reads immediately as a soft contact shadow without a single shadow-casting light or render pass.

A placement ring borrowed directly from real AR UI

A thin RingGeometry sits beneath the model, given a slow, continuous rotation inside the render loop (ring.rotation.z = t * 0.00025) — the same subtle "anchored and alive" animation real AR product placement UIs use to confirm an object is actively tracked, adapted here to a pedestal instead of a real-world floor plane.

A capped polar angle keeps the camera above the pedestal

controls.maxPolarAngle is set just under Math.PI / 2, which prevents OrbitControls from ever dragging the camera down below the pedestal's top surface — a small constraint that keeps every possible camera angle looking like a believable "product on a stand" shot instead of an underside view that breaks the illusion.

Auto-fit onto the pedestal's own top surface

Rather than a hardcoded scale and height, the model is measured with THREE.Box3 after loading, scaled to a fixed target size, then shifted vertically so its lowest point sits exactly at PEDESTAL_TOP — the same known Y coordinate the contact shadow and ring are both already positioned at, so the three pieces always line up regardless of the loaded model's native proportions.

A one-click recenter, not a stuck camera

A "Recenter" button resets the camera back to HOME_POSITION and the orbit target back to the pedestal, so a visitor who's dragged the view somewhere disorienting always has an obvious way back — a small but real usability detail real AR viewers also include.

A named, honest fallback if the model fails

If the .glb can't load, the real error is logged and a simple icosahedron takes the model's exact placed position on the pedestal, so the "placed object" illusion holds even without the real asset.

Customizing it

Swap MODEL_URL for any other product-scaled .glb, adjust PEDESTAL_RADIUS to match a differently-proportioned object, or pair this with GLB product color configurator for a "place, then customize" flow.