Quick start

1. Render a model

import { ModelLabViewer } from '@taranjeetsinghh/model-lab/viewer'

export function Preview() {
  return (
    <div style={{ height: 560 }}>
      <ModelLabViewer
        src="/models/product.glb"
        controls
        autoFit
      />
    </div>
  )
}

2. Author a preset

Embed the editor in an internal route or a separate tool:

import { ModelLabEditor } from '@taranjeetsinghh/model-lab/editor'
import '@taranjeetsinghh/model-lab/styles.css'

export function Studio() {
  return (
    <div style={{ height: '100vh' }}>
      <ModelLabEditor />
    </div>
  )
}

Load a model, adjust its appearance, capture keyframes, and choose Export configuration. The downloaded JSON uses the 3d-model-lab/v2 schema.

3. Replay the preset

import {
  ModelLabViewer,
  parseViewerPreset,
} from '@taranjeetsinghh/model-lab/viewer'
import presetJson from './product-viewer-config.json'

const preset = parseViewerPreset(presetJson)

export function ProductExperience() {
  return (
    <ModelLabViewer
      src="/models/product.glb"
      preset={preset}
      playSequence
      sequenceLoop={false}
      controlsWhilePlaying={false}
    />
  )
}

4. Map uploaded replacement textures

<ModelLabViewer
  src="/models/product.glb"
  preset={preset}
  textureUrls={{
    'custom-base-color.webp': '/models/textures/custom-base-color.webp',
    'custom-normal.webp': '/models/textures/custom-normal.webp',
  }}
/>

5. Control it through a ref

const viewerRef = useRef<ModelLabViewerHandle>(null)

<ModelLabViewer ref={viewerRef} src="/models/product.glb" />

<button onClick={() => viewerRef.current?.fitCamera()}>Fit</button>
<button onClick={() => {
  const image = viewerRef.current?.captureScreenshot()
  console.log(image)
}}>Capture</button>