Model Viewer

低多邊形 3D 模型軌道檢視器：拖曳自由旋轉、放開帶慣性、自動旋轉與方向光即時打光。純 canvas 2D 投影模擬，無 WebGL、無外部相依。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

模型model

模型主色color

線框模式wireframe

自動旋轉autoRotate

旋轉速度（度／秒）autoRotateSpeed

接觸陰影floor

<ModelViewer />

npx shadcn@latest add https://webberui.com/r/model-viewer.json

或在 components.json 設定 registries 後，改用 @webberui/model-viewer 安裝。

安裝依賴後，從 registry JSON（/r/model-viewer.json 的 files[0].content）複製 model-viewer.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { ModelViewer } from "@/components/ui/model-viewer";

<ModelViewer model="icosahedron" color="#818cf8" className="h-[320px] w-full" />

model 可選 icosahedron、cube、octahedron、torus。容器需自備明確高度（例如 h-[320px]）。

Prop	型別	預設值	說明
`model`	`"icosahedron" \| "cube" \| "octahedron" \| "torus"`	`"icosahedron"`	內建幾何
`color`	`string`	`"#818cf8"`	模型主色（十六進位），面光影由此色明暗調變
`wireframe`	`boolean`	`false`	線框模式，只描邊不填色
`autoRotate`	`boolean`	`true`	是否自動繞 Y 軸旋轉
`autoRotateSpeed`	`number`	`26`	自動旋轉速度（度／秒）
`interactive`	`boolean`	`true`	允許拖曳軌道旋轉，放開後帶慣性
`ambient`	`number`	`0.32`	環境光比例（`0`~`1`），越高整體越亮、對比越弱
`floor`	`boolean`	`true`	在模型下方畫柔和接觸陰影