`useViewerModel`

Provides model lifecycle state and scene metadata: loading status, errors, scene bounds, object count, and the list of bindable objects.

Usage


import { useViewerModel } from "@liveroom-tech/react-immersive";
 
const {
  isLoading,
  isReady,
  error,
  bounds,
  objectCount,
  materialVariants,
  materialVariantGroups,
  objects,
  handleModelLoaded,
  handleObjectCatalog,
  handleLoadError,
} = useViewerModel();
 
<ModelViewer
  onModelLoaded={handleModelLoaded}
  onObjectCatalog={handleObjectCatalog}
  onLoadError={handleLoadError}
  ...
/>

Returns

Name	Type	Description
`isLoading`	`boolean`	`true` until the model has loaded or failed
`isReady`	`boolean`	`true` after a successful model load
`error`	`unknown \| null`	The most recent load/render error, or `null`
`bounds`	`SceneBounds \| null`	Scene bounds: `min`, `max`, `center`, `size`
`objectCount`	`number`	Number of mesh objects in the loaded scene
`materialVariants`	`string[]`	Names of the model’s glTF material variants; empty when it has none. See `showMaterialVariants`
`materialVariantGroups`	`MaterialVariantGroup[]`	The same variants as option groups, each with a `name` (or `null`) and its `variants` (`name`, display `label`, and a `swatch` colour when the material is a plain colour)
`objects`	`ViewerObjectInfo[]`	Every bindable object in the model; filled once `handleObjectCatalog` is passed to `onObjectCatalog`
`handleModelLoaded`	`(model: ViewerModelInfo) => void`	Callback to pass to `onModelLoaded`
`handleObjectCatalog`	`(objects: ViewerObjectInfo[]) => void`	Callback to pass to `onObjectCatalog`
`handleLoadError`	`(error: unknown) => void`	Callback to pass to `onLoadError`

Example: Loading States


const { isLoading, isReady, error } = useViewerModel();
 
if (isLoading) return <p>Loading model…</p>;
if (error) return <p>Failed to load: {String(error)}</p>;
if (isReady) return <p>Model ready with {objectCount} objects</p>;

Example: Listing the model’s objects


const { objects, handleObjectCatalog } = useViewerModel();
 
<ModelViewer
  modelUrl="/model.glb"
  licenseKey={licenseKey}
  onObjectCatalog={handleObjectCatalog}
/>;
 
<ul>
  {objects.map((object) => (
    <li key={object.name}>
      {object.name} ({object.triangles} triangles)
    </li>
  ))}
</ul>;