React 18

Lunaar 3D Model Viewer & AR Platform

3D Model Viewer and Augmented Reality Platform

Overview

The Lunaar 3D Model Viewer is the web front-end that lets the Lunaar ecosystem present its AI-generated 3D assets as interactive models and augmented-reality experiences on any device. Built as a stateless React SPA with account-based multi-tenant routing, it delivers isolated, per-client model libraries from AWS S3.

What It Does

The platform renders interactive 3D models directly in the browser with orbital camera controls and auto-rotation. Desktop users can hand the experience off to their phone via a QR code, while mobile visitors launch native AR straight from the page on iOS (Quick Look) and Android (Scene Viewer / WebXR) without installing an app.

Tech Stack

React 18TypeScriptMaterial-UIGoogle Model ViewerAWS S3KubernetesWebGLReact RouterSwiperWebXRARCoreiOS Quick Look

View Live

Key Features

3D Model Visualization: WebGL-based interactive 3D rendering with auto-rotation and orbital camera controls

Native AR Support: Native AR experience on iOS (Quick Look) and Android (ARCore, WebXR) devices

Cross-Device Experience: QR code-based instant mobile handoff for desktop users, direct AR activation for mobile users

Model Carousel: Swiper integration with thumbnail preview for multiple model variants

Multi-Tenant Architecture: Account-based routing and AWS S3 isolation for per-client model repositories

Responsive Design: Optimized for all screen sizes with mobile-first approach

CDN-Served Assets: Fast 3D model delivery through AWS S3 integration

Device Detection: Platform-specific experience through intelligent user agent parsing

Technical Highlights

→React 18 + TypeScript SPA with custom type definitions for the Model Viewer web component

→Google Model Viewer for hardware-accelerated WebGL 3D rendering

→Multi-tenant URL routing (/render/:accountId/*) with URL-driven, stateless model configuration

→AWS S3 asset delivery served over CDN for fast, isolated per-client model libraries

→Cross-platform AR compatibility layer targeting iOS Quick Look and Android Scene Viewer / WebXR

→User-agent detection that adapts the flow for desktop (QR handoff) vs mobile (direct AR)

→Material-UI design system with Swiper-based model carousel and thumbnail previews

→Containerized deployment on Kubernetes with progressive and lazy asset loading

Key Achievements

Built seamless cross-device experience with QR code integration

Implemented multi-tenant architecture with complete client isolation

Created platform-agnostic AR solution supporting iOS and Android

Achieved high performance with progressive loading strategies

Deployed scalable infrastructure on Kubernetes

Integrated cloud-based asset management with AWS S3

Impact & Results

The viewer closes the loop on Lunaar's image-to-3D pipeline, turning generated assets into shareable, install-free AR experiences that customers can place in their own space. It shows depth across interactive 3D/AR on the web, multi-tenant frontend architecture, and cloud delivery on AWS and Kubernetes.