GLB Spin-to-Reveal Stats Viewer — Free Three.js glTF Product Spec Snippet

A common product-viewer pattern shows different information depending on which "side" of the object currently faces the camera. This snippet builds that honestly: each stat card is assigned a fixed azimuthal angle around the product, and on every frame the snippet compares that angle against OrbitControls' own current azimuthal angle — reading real orbit state, not a second, hand-rolled rotation tracker running in parallel.

One angle space, not two competing ones

OrbitControls already tracks the camera's azimuthal angle around its target internally to do its own job — and exposes it directly via controls.getAzimuthalAngle(). Rather than building a separate system to track "how far the user has spun the product," this snippet reuses that exact same built-in value. There is only ever one source of truth for the current viewing angle, which is also why the reveal state can never drift out of sync with what a visitor actually sees on screen.

Wrapped angle comparison, not naive subtraction

Azimuthal angles wrap around at plus or minus pi radians, so naively subtracting two angles can produce a value like 1.9 times pi for two angles that are actually very close together (just on opposite sides of the wrap point). angleDiff() normalizes the difference back into the [-pi, pi] range before taking its absolute value, so a stat assigned to the "back" of the product (angle pi) reveals correctly regardless of which direction the visitor spun to get there.

A reveal window, not an exact angle match

Each stat only needs the camera's current azimuth to fall within REVEAL_WINDOW radians of its assigned angle, not to match it exactly — a forgiving enough tolerance that a visitor doesn't have to hit one precise degree to trigger a reveal, while still being narrow enough that generally only one stat (occasionally two, near a boundary) is visible at once.

Camera constrained, not free-roaming

controls.minPolarAngle/maxPolarAngle are both set close to level, keeping the camera at roughly product-shot height throughout the whole interaction — the spin-to-reveal mechanic is specifically about *azimuthal* angle, so vertical wandering is intentionally limited rather than adding a dimension the stat system doesn't account for.

A named, honest fallback if the model fails

If the .glb can't load, a simple box placeholder takes the model's exact position, and the spin-to-reveal stat system keeps working exactly the same — the interaction only depends on the camera's own orbit state, never on anything specific to the loaded geometry.

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

Add more stat cards by extending STAT_ANGLES (evenly spacing them around the full circle), swap MODEL_URL for any other product-scaled .glb, or pair this with GLB product color configurator for a combined spec-and-color product page.