concept · real-time 3D floor-plan
Limmat Expo
A way to walk an exhibition hall before it exists. Three floors of a fictional Swiss trade-fair as a real-time 3D scene: orbit the hall, pull the floors apart to see the whole venue, and click any booth to see who is on it. The same scene is a conference venue, a shopping-centre directory, or a museum map, just different labels.
click a booth to see the exhibitor · drag to orbit · scroll to zoom
This is the real thing: a WebGL scene rendered by three.js through Threlte. Every booth is a lit, shadow-casting mesh, the camera orbits freely, and a raycaster turns pointer moves into hovers and clicks. The restraint is in the renderer: it only draws a frame when something actually changes.
render pipeline · grid data to frame
camera now: azimuth 0 deg, polar 0 deg, distance 0.0, damped by camera-controls and read back live
where the speed comes from
- Renders on change: the scene runs in on-demand mode. A still hall draws zero frames, a hidden tab draws nothing at all, and the little crowd only strolls while the hall idles, so the renderer goes back to sleep the moment you take the camera.
- A small vocabulary: the whole venue is boxes, cylinders and one SDF font, the crowd is a single instanced mesh per hall, and the lot stays at a few hundred draw calls, so even modest GPUs idle through it.
- A second door: canvas picking is pointer work, so the booth list mirrors the scene and selects without it. Keyboards and screen readers never touch the canvas.
The floor plan is static sample data, so two visitors see the same halls and nothing is bookable. A real venue would load the layout and exhibitor list from a CMS and let an organizer edit it live. An earlier version of this page built the same plan from CSS transforms; WebGL earns its weight here with real lighting, free orbit, and the exploded floor view. Reduced motion swaps every glide for a cut.