Building a Smart Hospital Digital Twin with React Three Fiber: Editor, Dashboard, and BIM Browser

Author: 前端繁华如梦

Tags: 前端

When building a building digital twin, it's common to split "the good-looking 3D view" and "the editable backend" into two separate systems. This project puts them in the same front-end: the same 3D scene can be used to place equipment in the backend and switch directly to a visualization dashboard; alongside it sits a locally parsed IFC browser. The scene is currently set on a smart hospital complex, surrounded by a procedurally generated city.

The following is written based on the actual capabilities that are working. Reserved and demo data will be explicitly marked, to avoid mixing with what's already functional.

Four product entry points

Routes are separated by paths, not by a multi-page framework:

Entry	Path	What it does
Backend editor	/	Place equipment, modify floors, tweak the scene, save twin data
Visualization dashboard	/screen	The same 3D scene plus metrics, charts, and floor navigation
BIM browser	/bim	Open IFC in the browser, do component tree, measure, and section
3D design	/design	Embed an external parametric designer (local 127.0.0.1:5000)

The editor and dashboard share the same BuildingScene; sky, lights, ground, weather, and post-processing are not drawn twice. On the desktop, Electron packages it as a Windows installer and portable version; the product is named "智汇数字孪生编辑器" (Smart Digital Twin Editor).

Tech stack: React 19, TypeScript, Vite, Zustand, Ant Design 6 (dark theme), Three.js, React Three Fiber, drei, ECharts, web-ifc-three.

The hospital scene itself

The main scene is not a single textured building but a block-by-block decomposition of a hospital complex:

• Main tower: about 15 floors, white facades with horizontal coated glass. The glass is assembled in blocks, two rows per floor, reflective on the outside, no view into the interior.
• Outpatient podium on the south side, with a "门诊" (outpatient) portico in the middle.
• East and west wings labeled as Building 3 and Building 5B, connected by a corridor.
• South gate: a stone column gatehouse, with "龙国第一医院" (First Hospital of Dragon Country) written on the lintel, a central driveway, and retractable gates and flower beds on both sides.
• Roof signs: the south eave shows the hospital name in Chinese and English, the north eave shows "住院部" (Inpatient Department), indicating the inpatient building is at the rear.
• Inside the campus: walls, stone paving, plaza trees, streetlights. In front of the gate is a concrete road network connecting to the municipal road to the south; the walls carry medical-themed posters.
• Parking lot: ground parking spaces on both sides of the plaza, including accessible spaces, emergency spaces, and parking signs.

Floors follow hospital functions: underground garage, outpatient hall, outpatient floors, technical floors, ward floors, administrative floors, and the machine room on the top. The total number of floors can be changed, and each floor's width, depth, and height can be adjusted individually. The building mass is a fixed component and cannot be dragged away like equipment.

Outside the campus walls is a procedural city with roughly 64-meter grid blocks. The road network, road markings, and night-lit windows are all drawn in shaders. Zones include residential, office, tech innovation, commercial, and public amenities, plus an ecological lake and an eastern waterfront. The scene marks the complex building, outpatient podium, wings, front plaza, and these urban zones with bubbles.

Backend editor

The editor is a classic three-column layout: asset library on the left, viewport in the middle, properties on the right.

Scene files. Creating a new scene resets to the factory layout. Saving prefers writing to the backend PUT /api/dt/scene (devices and placed effects); when the backend is not running, it falls back to browser local storage. Opening a scene also requests the backend first; if no save exists, it prompts. Undo/redo operate on the device list history stack, with keyboard shortcuts Ctrl+Z / Ctrl+Y.

Device library. Fifteen categories of low-poly devices, drag into the viewport or add from a form; the code is required:

• IoT sensing: temperature/humidity, CO₂, smoke detector, energy meter, water meter
• HVAC: air handling unit, fan coil unit
• Mechanical and electrical: elevator, distribution cabinet, water pump
• Fire and security: fire hydrant, dome camera, bullet camera, access control
• Parking space

After selection, you can change the name, color, opacity, position, rotation, and scale. Move by direct dragging; rotate and scale via transform handles. Delete removes. The search box filters by name, code, or type; clicking a result flies to that device and pops a 3D info tag.

Layers. Building, structure, MEP, HVAC, electrical, fire, low voltage, pipe network, cameras, parking, greenery, effects, and zone labels can be toggled individually. Some layers also have opacity adjustment, for looking at devices and pipes inside the building.

Floor viewing. Three operations are separate:

• Floor expansion: spreads each floor apart along the height axis
• Floor sectioning: hides the slabs and devices above a selected floor
• Floor focus: shows only one floor for easier device editing on that floor

The model tree lists devices and effects per floor; clicking a floor lets you change its dimensions.

Viewport. Browse mode and edit mode are separated. In browse mode, devices cannot be dragged, but walking, locating, and heatmap still work. Additional features:

• First-person walking (WASD, grounded on the current floor)
• Security patrol: third-person walk along the plaza loop, mutually exclusive with walking
• Day/night and lighting presets
• Sunny, rain, snow, plus fog type, color, and distance
• Sky, exposure, ambient reflection, shadow, and glow
• Glass color, roughness, metalness, and transparency presets
• Spatial heatmaps: energy consumption, temperature, CO₂, personnel density, occupancy rate, workstation usage rate

Heatmaps are currently demo colors calculated per floor; once IoT is connected, they will switch to real measured values.

Effect library. Effects can be dragged from the left onto the ground:

• Particles: fire, smoke, fireworks, fountain, fire ring, tornado, volumetric clouds
• Shaders: radar, electronic fence, warning ring, holographic light column, expanding ripple, etc.
• Trees and grass: ash, oak, pine, and lawn blocks; trees have adjustable shape parameters

These objects are saved along with devices.

IoT configuration. Each device can have a protocol (MQTT, Modbus TCP, OPC UA, HTTP), address, and measurement points. The platform is not yet connected, so status is "Not connected"; whatever is filled in is saved with the scene, and after connection the point structure won't need to be redefined. The connection overview also shows that all devices are still in the reserved state.

The "Publish" and "Settings" buttons in the top bar are placeholders: publish only shows a toast, and model version management is not yet done.

Visualization dashboard

/screen places the editor's scene in the center and hangs metrics on the sides. When the backend is available, it reads dt-api (default 127.0.0.1:9100) with a refresh of about 15 seconds; if it cannot connect, it falls back to local demo data, and the page indicates the data source.

Blocks already laid out:

• Total device count, unconnected count, today's energy consumption, average temperature, average CO₂, people present, occupancy rate, free parking spaces
• 24-hour temperature / humidity / CO₂
• Device distribution by system (this follows the device count in the current scene, not hard-coded)
• Energy intensity per floor
• Occupancy and workstation utilization
• Alarm list (empty when not connected)
• IoT status: protocols reserved, online data sources at 0

The 3D side retains search locate, floor focus, floor expansion, spatial coloring, and visibility toggles for building, structure, pipe network, HVAC, and greenery. Clicking a device pops a detail card; camera types reserve video playback (hls.js). The toolbar offers auto patrol, reset, and fullscreen.

BIM browser

/bim uses web-ifc-three to parse IFC in the browser, without converting the model on the server first.

• Open a local .ifc file, or load an example
• Also has "floor structure reconstruction" and loading MEP per floor (floors 1, 2, 3, 7, 8, 9)
• Component tree is searchable, with hide, isolate, focus
• Click a component to view IFC properties, grouped by property set
• Measure distance, area, angle; Enter ends a measurement group
• Section box, drag faces to change range
• Six standard views (front, back, left, right, top, bottom), plus rotate, reset, clear
• Status bar shows file name, component count, triangle count, and load time

The 3D design page is a separate track: it probes whether a local design service is online, embeds it via iframe if online, or shows an address when offline. Templates, houses, and parametric modeling live in that service, not in this repository's 3D scene.

How data is connected

Editor state uses Zustand. Scene persistence only submits two things: the device list, and placed effects and trees. Building geometry is still code-generated and does not go into the save file.

The dashboard and editor agree on the same backend API. When the API is unavailable, the editor falls back to local save, the dashboard falls back to demo curves, and the 3D scene itself keeps rotating normally. This way, even without an IoT platform, placement, walking, and demos can be used first.

Suitable further topics

If this were to be split into separate technical articles, worth writing on its own are:

1. How to assemble the hospital facade from instanced glass blocks and avoid coplanar z-fighting
2. Using shaders for urban road networks and buildings instead of thousands of instanced meshes
3. How to separate browse and edit states when the editor and dashboard share one R3F scene
4. Doing component tree, measurement, and section box for IFC in the browser

IoT real-time values, alarm pushes, and model version management are not yet connected. The current focus is to get the hospital scene, device placement, and three viewing entrances running.