SimpleModelViewer

A lightweight viewer for cases where you want to load a GLB/GLTF asset, inspect meshes, and toggle visibility without building objectBindings. It can either load a fixed modelUrl or, when enableModelUpload is enabled, let the user drag-and-drop or choose a local model at runtime.

Usage

import { SimpleModelViewer } from "@liveroom/react-immersive";
 
export default function App() {
  return (
    <div style={{ height: "100vh" }}>
      <SimpleModelViewer modelUrl="/model.glb" />
    </div>
  );
}

Behavior

• Discovers renderable meshes directly from the loaded GLB/GLTF scene
• Renders a right-side scene objects panel with search and visibility toggles
• Renders a left-side environment/scene settings panel (background, auto-rotate, environment preset, exposure, ambient + directional light color/intensity)
• Can swap modelUrl for a built-in drag-and-drop / file-picker upload flow
• Lets users click a mesh or panel row to select and focus it
• Fits the full scene on initial load
• Uses built-in ambient, directional, and environment lighting

Props

type SimpleModelViewerProps = {
  modelUrl: string;
  backgroundColor?: string;
  showSceneObjectsPanel?: boolean;
  showSceneSettingsPanel?: boolean;
  enableModelUpload?: boolean;
  onModelLoaded?: (scene: Object3D) => void;
  onLoadError?: (error: unknown) => void;
};

modelUrl

Required. URL or public path to the .glb or .gltf model to inspect. For .gltf URLs with external .bin or texture files, those files must be hosted at the relative paths declared in the .gltf.

backgroundColor

Optional canvas background color.

Default:

"#1a1a1a";

showSceneObjectsPanel

Optional boolean that controls whether the right-side scene objects panel is rendered.

Default:

true;

showSceneSettingsPanel

Optional boolean that controls whether the left-side environment/scene settings panel is rendered. It exposes background color/visibility, auto-rotate, the @react-three/drei environment preset, exposure, and ambient/directional light color and intensity.

Default:

true;

enableModelUpload

Optional boolean that swaps the fixed modelUrl workflow for a built-in upload UI. When enabled, the viewer starts with a drag-and-drop / file-picker empty state and loads the uploaded .glb, standalone/data-URI .gltf, or .zip containing a .gltf plus its referenced .bin and texture files.

Default:

false;

onModelLoaded

Optional callback fired after the GLB/GLTF scene has loaded.

onModelLoaded?: (scene: Object3D) => void

onLoadError

Optional callback fired if the model fails to load or render.

onLoadError?: (error: unknown) => void