Model Viewer
A three.js-style 3D model orbit viewer
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A low-poly 3D model orbit viewer: drag to rotate freely, release for momentum, with automatic rotation and live directional lighting. A pure canvas 2D projection simulation — no WebGL, no external dependencies.
npx shadcn@latest add "https://webberui.com/r/model-viewer.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ModelViewer />
Installation
npx shadcn@latest add "https://webberui.com/r/model-viewer.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/model-viewer.
Usage
import { ModelViewer } from "@/components/ui/model-viewer";
<ModelViewer model="icosahedron" color="#818cf8" className="h-[320px] w-full" />model can be icosahedron, cube, octahedron, or torus. The container must supply an explicit height of its own (for example h-[320px]).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
model | "icosahedron" | "cube" | "octahedron" | "torus" | "icosahedron" | Built-in geometry |
color | string | "#818cf8" | Main model color (hexadecimal); face shading modulates the light and dark of this color |
wireframe | boolean | false | Wireframe mode: strokes only, no fill |
autoRotate | boolean | true | Whether to rotate automatically around the Y axis |
autoRotateSpeed | number | 26 | Automatic rotation speed (degrees/second) |
interactive | boolean | true | Allow dragging to orbit, with momentum after release |
ambient | number | 0.32 | Ambient light ratio (0–1); higher is brighter overall with weaker contrast |
floor | boolean | true | Draw a soft contact shadow beneath the model |
Accessibility
- When the user has "reduce motion" enabled at the system level, automatic rotation and dragging are disabled and a single static frame renders at the default angle
- The canvas is marked
aria-hidden— a purely decorative layer, so it does not interfere with assistive technology