Skip to content

v1.4.0 — 3D crowd density reference

Choose a tag to compare

@ProfRino ProfRino released this 25 Jun 23:00
· 17 commits to main since this release

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.