A Hospital Digital Twin in One R3F Scene: Editor, Dashboard, and Browser-Based IFC Viewer
Keeping the editor and the dashboard on the same R3F scene eliminates the geometry sync problem that plagues many digital twin stacks, and parsing IFC in the browser removes the need for a separate model conversion service.
The project splits into four routes: a scene editor, a dashboard, a BIM browser, and a design page. The editor and dashboard share one BuildingScene component, so placement changes and visual settings are not duplicated. The hospital campus is built from block geometry, with a procedural city around it rendered via shaders.
The editor offers a 15-category device library, layers, floor expansion and sectioning, and a range of effects and heatmaps. The dashboard pulls metrics from a backend when available, falling back to local demo data otherwise. The BIM browser uses web-ifc-three to parse IFC files entirely in the browser, offering component trees, measurements, and sectioning. The full stack is React 19, TypeScript, Vite, Zustand, Three.js, and React Three Fiber.
IoT device status, alarms, and model version management are still placeholders. Until live data arrives, the editor and dashboard run with demo curves and a local backend, which keeps the whole interactive shell usable.
Unifying the editor and dashboard in a single R3F scene is a pragmatic answer to the common digital twin problem of keeping backend and presentation in sync.
Parsing IFC entirely in the browser with web-ifc-three avoids a server-side conversion pipeline, but likely limits the size of models that can be handled.
The project is a front-end-focused demonstrator; it explicitly acknowledges missing IoT integration and uses demo data, so its value lies in the interaction model rather than live data.
The procedural city rendered via shaders is a performance-conscious choice, replacing thousands of instanced meshes with a single shader pass.