Installation

Requirements

Model Lab is a React library built on Three.js, React Three Fiber, and Drei. Install the package and its peer dependencies in the application that will render the viewer.

npm install @taranjeetsinghh/model-lab   react react-dom three @react-three/fiber @react-three/drei

The package currently targets React 18 or 19, React Three Fiber 8 or 9, Drei 9 or 10, and Three.js 0.170 or newer within the declared peer ranges.

Import paths

Use focused entry points so an application imports only the layer it needs:

import { ModelLabEditor } from '@taranjeetsinghh/model-lab/editor'
import { ModelLabViewer } from '@taranjeetsinghh/model-lab/viewer'
import { ImmersiveSequencePlayer } from '@taranjeetsinghh/model-lab/sequence'
import { ModelPivotGroup } from '@taranjeetsinghh/model-lab/pivot'
import { CinematicEffectDriver } from '@taranjeetsinghh/model-lab/effects'

Import the stylesheet only when you render the full editor:

import '@taranjeetsinghh/model-lab/styles.css'

Draco decoder files

Copy the Three.js Draco decoder files to a public directory and pass that directory to the editor or viewer:

<ModelLabViewer
  src="/models/compressed.glb"
  dracoDecoderPath="/draco/"
/>

The path must end at the directory containing the decoder files, not at one specific file.

TypeScript

The package ships declarations for every public entry point. Prefer importing public types from the same entry point as the runtime symbol:

import type {
  ModelLabViewerHandle,
  ModelLabViewerProps,
} from '@taranjeetsinghh/model-lab/viewer'

CSS sizing requirement

A viewer needs an explicit height from itself or its parent:

<div style={{ height: 600 }}>
  <ModelLabViewer src="/models/product.glb" />
</div>

A zero-height parent produces a valid WebGL canvas with no visible area.