We Spent a Decade Rebuilding the Same 3D Viewer. So We Turned It Into a Product.

Introducing React Immersive interactive 3D model viewing for React, with live demos you can try right now.

Every product configurator starts the same way.

A client comes to you with a 3D model - a chair, a vehicle, a building, a machine - and a simple-sounding request: "We want customers to click on parts, change colors, and see it from every angle."

And then you build, from scratch, the same stack you built last time:

Raycasting logic so a click actually lands on the right mesh A data model that maps meshes to colors, textures, visibility, and actions Camera controls that feel good instead of nauseating UI panels around the viewer - object lists, swatches, sliders Lighting and post-processing so the model doesn't look like a 2005 screensaver

At LiveRoom, we've been building interactive 3D experiences for over a decade - product configurators, virtual showrooms, digital twins, AR commerce tools - for clients across 18+ countries. And on nearly every project, weeks went into rebuilding this same scaffolding before the actual product work even began.

React Three Fiber gave the ecosystem a brilliant foundation. But the layer above it - the opinionated, production-ready viewer with selection, bindings, and UI already wired together - never existed as a product.

So we built it.

What React Immersive Is

React Immersive is a React library for interactive 3D model viewing. You give it a GLB/GLTF asset; it gives you a production-ready viewer with mesh selection, object bindings, camera control, and built-in UI panels.

It ships as an npm package:
npm install @liveroom-tech/react-immersive

Three components cover the spectrum from "just show the model" to "full authoring environment":

• SimpleModelViewer - a zero-config drop-in. Point it at a model and you have an embeddable viewer with an upload-first workflow, a scene objects panel, environment and lighting controls, and click-to-select focus. [Docs]
• ModelViewer - the full experience. Object bindings drive color, texture, visibility, and custom actions from a plain data record, so your React state is your scene state. Measurement tools, annotations, XR flags, and performance tuning included. [Docs]
• BindingBuilder - a browser-based scene editor. Load your GLB, click meshes, author bindings and camera waypoints visually, and export everything as JSON or TypeScript that drops straight into your app. [Docs]

Under the hood it's React Three Fiber, with soft shadows, SSAO, bloom, and ACES tone mapping tuned out of the box - and a full hooks API for selection, hover, camera, animations, bindings, visibility, and shareable state, when you want to go deeper than the built-in UI.

Don't Take Our Word for It - Click These

The best way to understand the library is to use it. Every one of these demos is hosted and live in your browser right now, no signup, and each links to its starter code on GitHub.

Vehicle Configurator - the classic use case, done properly. Grouped paint, wheel, and trim swatches patch multiple meshes at once; an aero-kit toggle hides or restores a whole package of parts; clickable parts and side-panel controls stay in sync through React state. If you build e-commerce or automotive experiences, start here.

Exploded View - drag one slider and a multi-part model separates into its components, each mesh sliding outward along its own direction, nested parts riding their parents. Fully reversible. Built for CAD models, engines, and gadgets - assembly inspection without a single line of animation code.

Cinematic Tour - an automatic camera that glides through a scene on a smooth spline, looping seamlessly, like a film. Waypoints are authored visually in BindingBuilder's Cinematic tab. Ideal for real estate walkthroughs and hero sections.

AR Product Viewer - a mobile-first retail demo: WebXR on supported Android devices, iOS Quick Look via USDZ. From a web viewer to "place it in your room" with two props.

Shareable View / Deep Link - fly the camera to an object, hide parts, then copy a link that restores the exact camera, selection, and visibility state for whoever opens it. Client review workflows, solved.

Guided Tour - scene annotations as tour stops, with built-in navigation that flies the camera between saved positions. No object bindings required.

Switch Room - a small but instructive one: two switches control four lights entirely through React state, and the whole scene's lighting responds. This is the bindings model in miniature.

Animation Studio - every clip baked into a rigged GLB, with transport controls, a scrubbable timeline, speed presets, and loop modes - all driven by one hook.

Texture Upload / Custom Print - shoppers upload their own artwork and watch it broadcast across every mesh of a garment. Custom apparel and print-on-demand, out of the box.

SimpleModelViewer and ModelViewer - the two core components in their hosted form, if you want to see the baseline experience before the fancy stuff.

And the one I'm proudest of: the Scene Editor - BindingBuilder hosted in your browser. Load a model, click meshes, author your scene visually, export TypeScript. This is the tool our own engineers use.

The Part Where We're Honest About the Business Model

React Immersive is a commercial library. The core source is private and commercially maintained - that's how we fund the roadmap and support it properly.

But here's the part that matters if you're evaluating it: license keys are free to create at the console, every hosted demo above runs without any signup at all, and the documentation, starter apps, and examples are public on GitHub - along with open issues and discussions where we actually respond.

We've shipped enough client projects to know developers don't adopt what they can't try. So you can try everything first.

Getting Started in Two Minutes

1.Play with the live demos - no install, no signup

2.Read the Getting Started guide

3.Clone a starter app and run it locally

4.Grab a free license key when you're ready to build

5.Open your own GLB in the Scene Editor and export bindings for your app

Why We Built This as a Product

There's a version of this story where the scaffolding stays an internal LiveRoom advantage forever, the thing that lets us quote 3D projects faster than competitors.

But the web is clearly heading toward interactive 3D as a default expectation: product pages, real estate, industrial documentation, education. The React Three Fiber ecosystem gave everyone the engine. What teams keep missing is the layer that turns an engine into a shippable product experience.

We had that layer sitting in ten years of project code. Packaging it felt less like a pivot and more like finally writing down what we already knew.

If you build product configurators, e-commerce 3D views, real estate walkthroughs, digital twins or anything where a user should be able to touch a 3D asset inside a React app we'd genuinely love for you to break it and tell us how.

Start here: react-immersive.liveroom.dev

Questions, bugs, ideas → GitHub Discussions