shadcn-3d-viewer

Overview

shadcn-3d-viewer is a source-owned 3D model viewer for shadcn/ui, built on React Three Fiber and adapted from Asset Studio's model viewer. It loads GLB models and installs into a Base UI shadcn project, where it uses the app's local primitives and semantic theme tokens.

It is more than a canvas: the viewer includes orbit, split and first-person cameras, lighting presets, four shading modes, animation controls, screenshots, fullscreen and a searchable scene inspector. It can be used as a ready-made ModelViewer, composed from compound parts, or driven by custom controls through useModelViewer(). The project ships with a Vite demo and a Storybook and is MIT licensed.

Features

• Camera modes: Orbit, four-view split sharing one WebGL renderer, and a first-person fly camera with pointer lock.
• Shading and lighting: Realistic, solid, normal and wireframe shading; procedural studio lighting with day, night and outdoor modes.
• Animation controls: GLTF clip selection, playback, restart, looping and speed.
• Capture and fullscreen: Clipboard and downloadable PNG screenshots, fullscreen with an in-page fallback.
• Scene inspector: Model dimensions, triangle, material and texture counts, selectable meshes and hierarchy.
• Performance: Lazy loading, demand-driven rendering, offscreen pausing and adaptive pixel ratio; Draco and Meshopt loader support.
• Accessibility: ARIA naming, keyboard-operable toolbars and focus-managed fullscreen.

Tech stack

• React 19
• React Three Fiber, Drei, Three.js
• Base UI shadcn primitives
• Vite, Storybook

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @3d-viewer/component-name