Production viewer

component · /viewer

ModelLabViewer owns the WebGL canvas and production loading lifecycle.

Complete example

import { useRef } from 'react'
import {
  ModelLabViewer,
  parseViewerPreset,
  type ModelLabViewerHandle,
} from '@taranjeetsinghh/model-lab/viewer'
import rawPreset from './viewer-config.json'

const preset = parseViewerPreset(rawPreset)

export function Experience() {
  const viewer = useRef<ModelLabViewerHandle>(null)

  return (
    <section style={{ height: '100vh' }}>
      <ModelLabViewer
        ref={viewer}
        src="/models/product.glb"
        preset={preset}
        playSequence
        controls
        controlsWhilePlaying={false}
        onLoad={(info) => console.log(info.stats)}
        onSequenceComplete={() => console.log('done')}
      />
    </section>
  )
}

Configuration sources

• preset restores a complete editor export.
• config overrides selected viewer values.
• sequence overrides the sequence from the preset.
• effect adds runtime material behavior.

Loading paths

Use resourcePath for GLTF external resources and dracoDecoderPath for Draco decoder assets.

Device pixel ratio

Use dpr to limit rendering cost on high-density displays:

<ModelLabViewer dpr={[1, 1.75]} />