Browse components
Model Viewer
Three.js studio viewer for a procedural model: physical clearcoat material, soft shadows, drag to orbit, auto-rotate and clamped zoom.
Installation
npx shadcn@latest add @glint-ui/model-viewerFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/model-viewer.json
Usage
import { ModelViewer } from "@/components/ui/model-viewer";
<div className="h-96">
<ModelViewer shape="torus-knot" color="#c4b5fd" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "torus-knot" | "blob" | "rounded-box" | "torus" | "torus-knot" | Procedural model to show. |
| color | string | "#c4b5fd" | Base material color. |
| metalness | number | 0.65 | 0 = dielectric, 1 = metal. |
| roughness | number | 0.18 | Surface roughness. |
| iridescence | number | 0.6 | Thin-film rainbow sheen. |
| autoRotate | boolean | true | Spin slowly when idle. |
| autoRotateSpeed | number | 1.5 | Auto-rotate speed (2 = 30s per turn). |
| minDistance | number | 3 | Closest camera distance. |
| maxDistance | number | 9 | Farthest camera distance. |
| shadow | boolean | true | Soft contact shadow under the model. |
| className | string | — | Extra classes for the root element. |