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.