Package: @liveroom-tech/react-immersive@5.2.0 Canonical: https://react-immersive.liveroom.dev/docs/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](https://react-immersive.liveroom.dev/examples/simple-model-viewer) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/simple-model-viewer-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/simple-model-viewer-demo) ### `ModelViewer` The fuller `ModelViewer` experience used for the richer hosted demo: - Object bindings and per-object actions - Scene config wiring - UV Checker toolbar - Exploded-view controls - Measurement tools - Annotation navigation - XR flags and performance tuning [Live Demo](https://react-immersive.liveroom.dev/examples/model-viewer) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/model-viewer-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/model-viewer-demo) ### `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](https://react-immersive.liveroom.dev/examples/guided-tour) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/guided-tour-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/guided-tour-demo) ### `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](https://react-immersive.liveroom.dev/examples/shareable-view) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/shareable-view-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/shareable-view-demo) ### `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](https://react-immersive.liveroom.dev/examples/ar-product-viewer) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/ar-product-viewer-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/ar-product-viewer-demo) ### `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](https://react-immersive.liveroom.dev/examples/switch-demo) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/switch-room-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/switch-room-demo) ### `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 - `useViewerConnection` shares one viewer-ready callback across camera, effects, and light setup - 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](https://react-immersive.liveroom.dev/examples/light-flicker) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/light-flicker-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/light-flicker-demo) ### `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](https://react-immersive.liveroom.dev/examples/vehicle-configurator) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/vehicle-configurator-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/vehicle-configurator-demo) ### `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](https://react-immersive.liveroom.dev/examples/exploded-view) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/exploded-view-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/exploded-view-demo) ### `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](https://react-immersive.liveroom.dev/examples/mouse-controler-demo) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/mouse-controller-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/mouse-controller-demo) ### `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](https://react-immersive.liveroom.dev/examples/cinematic-tour) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/cinematic-tour-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/cinematic-tour-demo) ### `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](https://react-immersive.liveroom.dev/examples/animation-studio) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/animation-studio-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/animation-studio-demo) ### `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 - `texturePositioning` lets shoppers drag, scale, and rotate the print; the result lands in `style.material.texture`, so it's broadcast the same way - `setBaseColor` and `clearTexture` drive the same grouped binding state - The viewer download menu exports the shirt's editable UV layout as SVG [Live Demo](https://react-immersive.liveroom.dev/examples/texture-upload) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/texture-upload-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/texture-upload-demo) ### `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](https://react-immersive.liveroom.dev/editor) · [Starter App](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples/binding-builder-demo) · [Open in CodeSandbox](https://codesandbox.io/s/github/liveroom-technologies/react-immersive-docs/tree/main/examples/binding-builder-demo) ## Public Code Examples If you want starter code, see the public community examples in the GitHub repo: - [SimpleModelViewer examples](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples) - [ModelViewer examples](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples) - [BindingBuilder examples](https://github.com/liveroom-technologies/react-immersive-docs/tree/main/examples) ## 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](https://react-immersive.liveroom.dev/console) before running gated demos locally.