Skip to Content
Examples

Examples

SimpleModelViewer

The lightweight inspection experience for quick model review:

  • Upload-first workflow
  • Scene objects panel
  • Environment and lighting controls
  • Click-to-select focus flow

Live Demo  · Starter App  · Open in CodeSandbox 

ModelViewer

The fuller ModelViewer experience used for the richer hosted demo:

  • Object bindings and per-object actions
  • Scene config wiring
  • Measurement tools
  • Annotation navigation
  • XR flags and performance tuning

Live Demo  · Starter App  · Open in CodeSandbox 

Guided Tour

A guided walkthrough demo that uses scene annotations as tour stops instead of per-object bindings:

  • SceneAnnotationMarker stops
  • Built-in annotation navigation
  • Camera flies to saved world positions
  • Position-only markers, no object binding needed

Live Demo  · Starter App  · Open in CodeSandbox 

Shareable View / Deep Link

Create a client-ready link to an exact walkthrough state:

  • Pick an object to fly the camera to it
  • Hide selected objects from the walkthrough
  • Copy or open a link that restores camera, selection, and visibility state
  • Built with useShareableViewerState

Live Demo  · Starter App  · Open in CodeSandbox 

AR Product Viewer

A standalone, mobile-first retail demo for placing a model in the customer’s space:

  • WebXR via enableXR on supported Android devices
  • iOS Quick Look using usdzUrl
  • Real-world initial scale using arScaleMode="real-world"
  • Desktop-to-phone QR handoff for opening the same experience in mobile AR
  • Minimal viewer UI focused on the product and AR handoff

Live Demo  · Starter App  · Open in CodeSandbox 

Switch Demo

A focused room-level example where two switches control four lights through app state:

  • Start with exported objectBindings.
  • Add declarative effects to the switch actions.
  • Target each light circuit as a binding group instead of listing every light.
  • Pass the bindings into ModelViewer as React state.
  • Pass useViewerActions().handleAction to ModelViewer and call runAction from the panel buttons.
  • Use the useSceneConfig light controller to synchronize ambient and key-light intensity.
  • Attach each point light to its bound bulb object without writing R3F light components.

Live Demo  · Starter App  · Open in CodeSandbox 

Light Flicker

An atmospheric lighting example that turns nine static bulb meshes into an unstable electrical circuit:

  • useObjectBindings applies the BindingBuilder-exported model setup
  • useSceneConfig changes the environment, bloom, and vignette by preset
  • useViewerEffects drives filament, glass, and point-light channels without Three.js access
  • Runtime point lights attach to their filament meshes and follow them automatically
  • Failing-circuit mode dims every bulb together from one shared signal
  • Possessed mode gives every bulb independent dim, flash, and blackout timing
  • Lit-up, failing-circuit, and possessed presets change the power behavior
  • BindingBuilder-exported bindings and scene configuration drive the model

Live Demo  · Starter App  · Open in CodeSandbox 

Vehicle Configurator

A product-configurator example that shows how BindingBuilder-exported object bindings can drive grouped customization flows:

  • Binding group selectors patch body paint, wheels, trim, and other multi-mesh sets without manual ID arrays
  • Built-in change-color / change-material / toggle-visibility actions are reinterpreted as real configurator controls
  • An aero-kit toggle hides or restores a whole package of parts
  • Window tint and headlight state update the same binding map the viewer renders
  • Clickable parts and side-panel controls stay in sync through React state

Live Demo  · Starter App  · Open in CodeSandbox 

Exploded View

An assembly-inspection demo that separates a multi-part model into its components with a single slider:

  • showExplodeControls renders the built-in explode slider in the viewer
  • Every bound mesh slides outward from the model center along its own direction
  • Nested parts ride their exploding parent instead of being displaced twice
  • Fully reversible, dragging back to zero reassembles the model exactly
  • Best suited to static product / CAD models (engines, gadgets, vehicles)

Live Demo  · Starter App  · Open in CodeSandbox 

Mouse Controller

An on-screen navigation control for touchscreen, kiosk, and guided viewing experiences:

  • Enable the built-in controller with showMouseController
  • Tune movement with moveSensitivity
  • Adjust its visibility with mouseControllerOpacity
  • Move it to a safe part of the interface with mouseControllerPosition

Live Demo  · Starter App  · Open in CodeSandbox 

Cinematic Tour

An automatic camera that glides through a space on its own, like a film:

  • The cinematic prop takes a list of waypoints (camera position + look-at keyframes)
  • The camera follows a smooth Catmull-Rom spline through them at a constant on-screen speed, looping seamlessly
  • autoPlay starts the glide once the model has loaded and framed
  • A play / pause control appears in the viewer; grabbing the camera pauses it
  • Waypoints are authored visually in BindingBuilder’s Cinematic tab and carried on sceneConfig.cinematic

Live Demo  · Starter App  · Open in CodeSandbox 

Animation Studio

A playback studio for a rigged, animated GLB, driven entirely by useViewerAnimations:

  • Clip picker for every animation baked into the model
  • Play, pause, and stop transport controls
  • A scrubbable timeline bound to the live playback position
  • Playback speed presets
  • A loop-mode toggle (repeat vs. play once) driven through sceneConfig.animations

Live Demo  · Starter App  · Open in CodeSandbox 

Texture Upload / Custom Print

A custom-apparel demo where shoppers upload their own artwork onto a product:

  • The built-in Upload Artwork action hands the file to onTextureUpload
  • A real app uploads it to storage and returns a durable URL (here a data URL)
  • The returned URL is committed to style.material.texture.path
  • copyMaterial and the shirt binding group broadcast the print without a manual ID array
  • setBaseColor and clearTexture drive the same grouped binding state
  • The viewer download menu exports the shirt’s editable UV layout as SVG

Live Demo  · Starter App  · Open in CodeSandbox 

BindingBuilder

The hosted BindingBuilder surface for authoring bindings in the browser:

  • Desktop-first editor shell
  • License-key based access
  • Full-height authoring workspace

Live Demo  · Starter App  · Open in CodeSandbox 

Public Code Examples

If you want starter code, see the public community examples in the GitHub repo:

Running Examples

For local starter apps, clone the public examples and run the example you want from its own folder.

Some examples require a valid license key. Create a free key at react-immersive.liveroom.dev/console  before running gated demos locally.

Getting StartedModelViewer