v1.4.0 — 3D crowd density reference
What's new
A new 3D density button in the header opens a Three.js modal that shows what a chosen crowd density actually looks like — a 2×2 m sample plot populated with little person figures at 1, 2, 3, 4, 5, or 6 people per square metre.
- Single mode — one tile at the chosen density (defaults to the selected zone's density, rounded to the nearest integer 1–6).
- Compare mode — all six densities side-by-side, colour-coded blue (1) → dark red (6).
- Reset view (↺) restores camera defaults; drag orbits, scroll zooms.
- Honest header: "zone is at 1.50 ppl/m² — showing nearest preset" so you know it's a reference, not an exact rendering.
Why
The slider gives you a number (e.g. 2.5 ppl/m²) and a colour, but most people don't have an intuition for what 2.5 ppl/m² actually feels like vs 5 ppl/m². The 3D scene grounds the abstract number in something you can look at — useful in event-planning conversations and in teaching.
Technical
- Three.js scene with PBR materials, shadow-mapped directional light, and a hemisphere fill.
- Reference layouts at 1–6 ppl/m² are authored by hand for natural spacing.
- Lazy-loaded via dynamic `import()` — opening the modal triggers the Three.js download; if you never open it, the initial app load is unchanged.
- Single-file bundle grows from ~1.0 MB to 1.79 MB (gzip 481 kB) when Three.js is inlined.
Downloads
`crowd-count.html` is a self-contained offline copy of the whole app — open it in any modern browser.