Superhero Metropolis — 4 heroes, 4 villains, news chopper PIP, full crime-wave-to-dawn night arc
A 3D mega-world: NEON CRUSADER, SKYWARDEN, PHASEKICK, AURA defend a city of 240 civilians from BARON COIL, THE FACADE, GRIDLOCK, HOLLOWMARK across downtown / Pier 7 / Union subway / City Hall / Hero HQ / MNN station — with chopper-cam PIP and full broadcast HUD.
Built with:
three.js r0.160 (single file)8-segment trailing cape mesh per heroInstancedMesh civilians + procedural window textures
Prompt
Build a single-file HTML page that recreates "a superhero night in a comic-book metropolis" as a continuous 3D autoplay mega-world I could put on Twitch and have viewers stay for hours.
Hard constraints:
- One HTML file, < 200KB.
- three.js r0.160.0 from unpkg, IIFE, strict mode, full disposable cleanup, reseed every ~10 min with a "THE NIGHT IS WON / DAWN BREAKS OVER METROPOLIS" overlay.
- First body line: <!-- ROUND15_MEGA v1 -->
- 6 spatial sub-locations in one three.js scene: downtown procedural blocks, Pier 7 harbor with water + ship + 3 cranes + containers, Union subway pit (platforms, rails, lit train), City Hall (stepped tower + dome), Hero HQ (radar tower), MNN news station (red antenna + dish + MNN logo).
- Mini-map canvas in HUD with landmarks + hero color dots + name labels + villain triangles + civilian dust + chopper sweep.
- 4 named heroes (NEON CRUSADER, SKYWARDEN, PHASEKICK, AURA) with full bodies, masks, glowing emblems, leg/arm swing, 8-segment trailing cape mesh, per-hero power FX (electric arc / solar glow / speed trail / psychic ring).
- 4 named villains (BARON COIL, THE FACADE, GRIDLOCK, HOLLOWMARK) with horns, dark capes, wandering AI.
- 240 InstancedMesh civilian pedestrians with HSL-randomized colors and street-grid wandering. Combined with name pool that rotates "WHO IS" lower-thirds, 100+ named characters total.
- 7-act narrative: DUSK → CRIME WAVE → HEROES RESPOND → VILLAINS ESCALATE → TEAM-UP → RESOLUTION → DAWN, with hero retargeting, threat meter color/level, chyron rotation, lighting transitions night → orange → dawn, streetlight flicker.
- 17 director cameras cycling every 4-7s, with random hero-attached shots.
- News chopper picture-in-picture camera (280×170) circling the city following action.
- HUD: MNN logo, digital clock advancing, threat panel, active incidents feed, Hero Command HQ status panel, "WHO IS X" lower-third rotator, scrolling chyron, ACT badge.
Tone: classic comic-book heroism. No real-world references. No graphic violence. Heroes win, villains get stopped, dawn breaks.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- How to give 4 superheroes individual visual identity from primitives + 8-segment trailing cape mesh + per-hero shader FX in under 50KB
- How to compose a comic-book metropolis with 6 distinct sub-locations (harbor, subway, downtown, city hall, hero HQ, news station) on a single mini-map
- How to pair a network-news chopper-cam PIP with 17 director cameras so the action always has both a wide and a close angle on whatever's escalating