Model Viewer
experimentalA glTF or GLB model people can turn and zoom, behind a poster, with three.js loaded only when the model is — never without WebGL.
- Display
- 2 files
- 1 npm package
- Accessibility notes
- Renders with WebGL
Loading the example…
pnpm dlx @dowel-ui/cli add model-viewernpm packages installed: three.
import { ModelViewer } from "@/components/ui/model-viewer";Default
On Request
Broken
<ModelViewer>
| Prop | Type | Default |
|---|---|---|
alt (required)Describes the model, for the poster and the 3D view alike. | string | — |
src (required)The model: a .glb or .gltf URL. | string | — |
autoRotateTurn slowly on its own. Default true. | boolean | true |
exposureLight strength. Default 1. | number | 1 |
onError | (error: unknown) => void | — |
onLoad | () => void | — |
orbitThe starting view, in degrees. | { yaw?: number; pitch?: number } | — |
posterA picture shown until the model is ready, and if it cannot be. | string | — |
revealLoad when it nears the screen, or only when asked. Default "visible". | "visible" | "interaction" | "visible" |
Plus every attribute of <figure> except onLoad, onError.
The poster carries the alt text until the model is ready; then a named, focusable region does ("3D model: …"), with a hint that the arrow keys turn it and plus and minus zoom. A status line says when it is loading, ready, or unavailable, and a visible note says so when the picture stands in. It turns on its own only while on screen and not hovered or focused, and never under reduced motion. The canvas is aria-hidden.
8/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes
