West Palm Beach 
Showroom Experience



Developed for Related Ross's West Palm Beach sales center, this interactive digital experience allows prospective buyers to virtually explore properties prior to construction. By connecting individual properties to their surrounding neighborhoods and the broader city, the experience helps buyers understand the location, views, and character of future developments before they are built.

Built with WebXR, the experience supports desktop and tablets  as well as VR headsets, allowing sales agents to guide prospective buyers through the immersive experience, or let them explore freely on their own.



Client / Studio
Related Ross / Imerza
Role
XR Engineer / Spatial Interaction Designer
Stack
React, React Three Fiber, Three.js, WebXR, Payload CMS






Exploring Connected Environments

The experience connects multiple developments across West Palm Beach into a continuous journey, allowing visitors to move between district-wide aerial perspectives, street-level environments, and individual property views. Rather than presenting each location as an isolated panorama, a connected navigation system helps visitors understand how properties relate to their surrounding neighborhoods and the broader city.

District View


Street View


In-Unit View




From Interface to Interaction

Designed for ease of exploration in VR, the spatial interface utilizes simple hand tracking, ray-based selection to help visitors navigate without relying on complex controls. A pinch gesture brings up a vertical floor selector, allowing visitors to scroll through available floors and switch between panoramic views without interrupting their experience.


Hand-ray and simple gesture-based UI selection 







Cross-Platform Synchronization

The experience extends beyond VR headsets to desktop and tablet devices through a MQTT-based messaging enables real-time synchronization between the sales agent's controls and the visitor's headset. This flexibility allows sales agents to navigate and guide visitors through the experience from a separate screen, making VR exploration part of a more accessible and collaborative sales process.



Synchronized 360° environments support shared exploration across desktop and VR.






Visual Waypoint Editor

To simplify the creation of interconnected environments, I designed and developed a visual waypoint editor that allows the team to configure navigation directly within 360° panoramas.

Instead of manually entering coordinates or editing scene data, users can drag and position waypoints in the environment, assign destination scenes, and adjust their appearance and orientation through a dedicated interface. The editor also supports media imports and scene creation, streamlining the process of building and maintaining navigation across the experience.








Architecture

The experience is built around a reusable WebXR viewer powered by Next.js and React Three Fiber. A Payload CMS backend manages panoramic media, scene relationships, and navigation data, allowing environments to be loaded dynamically rather than configured individually in code.




System architecture      Payload CMS supplies nested scenes, panoramic media, and navigation waypoints to a      Next.js and TypeScript web application. Its reusable WebXR 360 viewer uses      React Three Fiber for 360° rendering and scene navigation. The VR headset      offers WebXR, spatial UI, and hand tracking. The desktop or tablet browser      provides sales agent controls and synchronizes with the headset over MQTT.     Payload CMS Nested scene hierarchy · Panoramic media · Navigation waypoints NEXT.JS / TYPESCRIPT Reusable WebXR 360 Viewer React Three Fiber 360° rendering and scene navigation VR Headset WebXR · Spatial UI · Hand tracking Desktop / Tablet Sales agent controls MQTT · Live session control



Scalable Content Management

To accommodate more than 400 panoramic images, I designed a nested CMS schema supporting multiple districts, buildings, floors, and unit configurations. The structure accounts for different unit types and their associated 360° views across floors, while maintaining the relationships needed for location-based navigation. I also implemented AI-assisted authoring workflows with Imerza’s MCP to streamline scene configuration, media association, and navigation setup.



CONTENT SCHEMA Hierarchical structure for districts, buildings, floors, and unit views. District CityPlace · Shorecrest · Flagler Waterfront Building 10 City Point · Phillips Point · Esperante · One Flagler Floor Floor 10 · Floor 15 · Floor 20 Unit Unit A · Unit B · Unit C  · Unit D
Live Link

Try In Browser