Product Viewer

@sushindustries/react-product-viewer

A 3D product viewer for TanStack applications, documented with itself.

12 min read
View as MarkdownEdit on GitHub

Signature

ModelViewer({ model, gltf, variants, zoneScheme, zoneTints, scroll = "zoom", transparent = false, environment, grid = false, groundBound = true, snapshotRef, modelRef, controls = true, shadows = true, fit = false, pivot = "base", loadingLabel = "Loading model…", loadingOverlay = DefaultLoadingOverlay, scrollHint = "Hold ⌘ or Ctrl to zoom", className, children, }: ModelViewerProps<S>): ReactElement
ts

The layer under it

ProductModel is the piece the viewer mounts - the mesh, its variants and its zone tints, without the canvas or the controls. Reach for it when you own the scene:

<Canvas>
	<ProductModel model={config} variants={["walnut"]} origin="base" />
</Canvas>
tsx

Its props are defined in src/product-model.tsx and documented there. There is no second table on this page, because a table nothing generates is a table that drifts - which this one did, invisibly, for as long as the doctor looked for this file in the wrong package.

Used byProduct VariantsProduct VariantsOne model, several configurations, switched without reloading the asset - the GLB already holds them.@sushindustries/ui · 3d