Appearance
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.