3D asset viewerPro

An orbit viewer for generated 3D assets on a small WebGL 2 renderer: matcap, wireframe or both, a slow turntable, throw and zoom, and a turntable export to video.

Markdown

On this page

ProA generated ceramic vase on a slow turntable, drawn by a small WebGL renderer. Drag to orbit, switch between matcap and wireframe, export one full turn as a video.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/3d-asset-viewer

Usage

tsx

import { AssetViewer } from "@/components/ui/chatcn/pro/3d-asset-viewer"

<AssetViewer src="/assets/vase.obj" alt="Ceramic vase" />

Pass an OBJ src, or a mesh from parseObj, latheMesh or your own arrays. No 3D library is needed. Export turntable records one full turn in real time.

Examples

States

ProGenerating with a proxy mesh, wireframe on graphite, nothing yet, a file that failed and disabled.

Props

Prop	Type	Notes
`mesh`, `src`, `alt`
`status`, `progress`, `error`, `onRetry`		`generating` shows a proxy
`mode`	`"matcap" \| "wireframe" \| "both"`
`matcap`	`"clay" \| "porcelain" \| "graphite"`
`turntable`, `exportSeconds`, `exportSize`, `onExported`
`aspectRatio`, `labels`, `disabled`

Keyboard

Key	Action
Arrows	Orbit 15 degrees, `Shift` for 45
`+` `-`, `0`	Zoom, reset
`T`, `W`	Turntable, cycle shading

Accessibility

The canvas is an image with a description and triangle count; mode changes are announced.

Motion

Turntable 24 s a turn; reduced motion turns it and inertia off.