Overview
A WebGL model of the Centre for Advanced Studies (SCAS) at Sathyabama, built with Three.js and linked to a live simulation of occupancy, HVAC, power, solar, CCTV and fire drills.
The problem
See how a whole building is behaving in one view, and how changing one thing, an AC setpoint or a fire drill, ripples through energy and comfort.
How it works
The building is generated in code rather than modelled by hand: three floors, two light-well courtyards, bronze glazing, piers, glass partitions and desks, plus the east portico with its terracotta pillars, cantilevered canopy, stairs and ramps.
On top of the geometry sits a command centre. Every room carries a live badge, cameras show their view cones, and the solar strings and streetlights report in. The sun moves on a real solar path for the site, so golden hour and night look the way they would on campus.
It can also run scenarios: weather from clear to storm with lightning, volumetric heatmaps for temperature, CO₂ and energy density, a fire drill with smoke in Room 345 and an evacuation route to the assembly point, and a 15-step cinematic tour.
What it does
- Procedural 3D building: 3 floors, 2 courtyards, east portico
- 48 room badges, 7 CCTV view cones, 4 solar strings, 8 LoRa streetlights
- Sun position from a real solar ephemeris for the site
- Clear, overcast, rain and storm weather
- Heatmaps for temperature, CO₂ and energy density
- Fire drill with smoke, egress route and evacuee flow
- 15-step cinematic tour, keyboard search and controls
Built with
- React 19
- TypeScript
- Vite 7
- Three.js
- Tailwind CSS 4
In numbers
3 floors, 48 rooms and 1 campus block modelled with live-linked telemetry
Try it live
The live version opens in a new tab, so you can explore it at full size.
Open BB Digital Twin ↗