Build Story · 3D city viewer · EN / BG
City Fabric Viewer: a city you can fly over
A browser viewer that loads a 7,113-building city model and flies you between five placeholder hydrogen sites.
In one look
The problem
A city model is a big file, and in a plain viewer it reads as a flat map. The buildings are about 10 m tall on a footprint of about 5,000 m, so the height disappears. A plan for new energy sites has nowhere to sit on it yet.
What we built
Open the page and the city loads by itself, or drop your own .glb file on it. Fly over the streets, click one of five hydrogen sites and the camera glides there and opens a card in English or Bulgarian. Light pulses run along the chain from the solar plant to the electrolyser, the fuel cell and two refuelling stations. Everything that is a guess is labelled as one.
Where it is now
Live as a single page with no account, database or install. It is a study build, not a survey: all five site positions are invented placeholders, and a banner that cannot be dismissed says so. Building heights in the model are mostly generated, not measured. Last changed on 22 September.
What this would have cost in 2024
About $3.5k and 1–2 weeks
2024 team: 2 people: a 3D web developer and a 3D artist, part-time. Built here by one founder working with AI in 2 working days, 22 days apart.
| Piece | 2024 hours |
|---|---|
| Viewer core: GLB loading by drop or URL, load and error states, camera rig, fly-to, mobile panel | ~19 |
| Look and brand: golden-hour sky, hills and fog, ambient occlusion, dark-glass UI, logo, link preview | ~21 |
| Site markers, animated energy flows, bilingual site cards with illustrations | ~29 |
| City model prep: 7,113 buildings in Blender, normals check, export | ~23 |
| Total (PERT) | ~93 |
Method: PERT (O+4M+P)/6 per piece; low = O × $25, likely = PERT × $37.5, high = P × $50 (Accelerance 2024 Eastern-Europe band). These are estimates of what a team would have needed in 2024, not invoices.
How it was built
From first commit to current build in 2 working days, 22 days apart
- A working viewer in minutes
Drop a .glb on the page or point it at a hosted file. It shows loading progress, a clear error, and the file's size, mesh and triangle counts. Five invented hydrogen sites sit on the city from the start, under a banner that says their positions are not surveyed.
project created 08:29 UTC · working viewer committed 08:33 UTC - From flat map to a city you fly over
The locked isometric camera was replaced with a free perspective one that starts above the centre, and clicking a site flies to it. Heights are drawn at twice their size to bring back depth. The city model was rebuilt and became the default, so nobody has to upload it.
7,113 of 7,113 buildings pass a solid-volume check · 419,644 triangles · 22.96 MB - Look and signature pass
A new logo and link-preview card, a golden-hour sky with hills and fog, dark-glass panels, an electric hydrogen-blue accent, glowing energy flows with travelling pulses, and ripple rings at each site.
- Site cards
Each site opens a bilingual card with a key figure, three facts, the sites it connects to, an illustrative render and a source line. Every card keeps its Mock tag.
5 cards · English and Bulgarian
Who did what
The founder decided
- Mark every placeholder as mock: a permanent banner, and a tag on every label and card.
- Draw building heights at twice their size, because the heights are mostly generated and the exaggeration costs no accuracy.
- Keep it to one page: no account, no database, no backend.
AI built and checked
- The whole app was built in Lovable, with a studio colleague, from written build briefs, one per change: camera, palette, energy flows, site cards.
Stack
Want something like this for your team?
From one call to something live. The same method is in the Claude Operator Pack.
From the founder
You might also like
Shares Three.js · TanStack Start
Shares Three.js · TanStack Start
Shares Three.js · TanStack Start