Skip to content

Lifecycle and refs ​

Loading lifecycle ​

ModelLabViewer reports successful loading through onLoad and unrecoverable model-loading failures through onError.

tsx
<ModelLabViewer
  src="/models/product.glb"
  onLoad={(info) => console.log(info.stats, info.boundsCenter)}
  onError={(error) => reportError(error)}
/>

Viewer handle ​

ts
interface ModelLabViewerHandle {
  getModel(): THREE.Object3D | null
  getRenderer(): THREE.WebGLRenderer | null
  getCamera(): THREE.Camera | null
  getPivot(): [number, number, number]
  getPivotWorldPosition(): [number, number, number] | null
  getBoundsCenter(): [number, number, number] | null
  fitCamera(): void
  captureScreenshot(): string | null
}

Editor handle ​

The editor adds configuration, file loading, reset, and pivot authoring methods. See the ModelLabEditor API.

Cleanup ​

The runtime disposes cloned geometry, materials, and textures when the asset changes or the component unmounts. Do not retain references returned by getModel() beyond the viewer lifecycle.

Event frequency ​

onSequenceFrame is throttled during time-based playback to avoid triggering a React render on every WebGL frame. When sequence progress is explicitly controlled, frame callbacks can be used for synchronized UI.

Released under the MIT License.