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.
What this is
A 3D mega-world recreation of a comic-book metropolis on a superhero night. Six sub-locations sit in one three.js scene: procedural downtown blocks with cloned canvas-window textures, Pier 7 harbor with water + a docked ship + three cranes + containers, Union subway pit with platforms and a lit train, City Hall as a stepped tower with a dome, Hero HQ topped with a radar tower, and MNN news station with a red antenna and dish. Four named heroes — NEON CRUSADER, SKYWARDEN, PHASEKICK, AURA — patrol with eight-segment trailing cape meshes and per-hero power FX (electric arc, solar glow, speed trail, psychic ring). Four named villains — BARON COIL, THE FACADE, GRIDLOCK, HOLLOWMARK — escalate. 240 InstancedMesh civilians fill the streets between them. A news chopper picture-in-picture camera circles the action while seventeen ground director cameras cut every four to seven seconds. The MNN HUD runs a digital clock, threat meter, active incidents feed, Hero Command status panel, and a rotating "WHO IS" lower-third for the featured cast.
You don't play it. You watch it.
Why this is mind-blowing
The night actually has a seven-act narrative shape. DUSK is patrol cams over the harbor. CRIME WAVE drops the threat meter into orange and triggers villain wandering near City Hall and the subway. HEROES RESPOND retargets each hero onto a different villain. VILLAINS ESCALATE pushes the threat meter into red and the chyron starts running breaking-news strips. TEAM-UP routes two heroes together. RESOLUTION calms the fog color, drops the threat meter, and routes civilians back to the streets. DAWN warms the sky from night → orange → dawn, ignites streetlight flicker, and the chyron prints "THE NIGHT IS WON / DAWN BREAKS OVER METROPOLIS" right before the world reseeds with new heroes and a new villain roster. The chopper-cam PIP is the secret weapon — every act has both a wide circling shot and a close ground angle, like an actual network-news production. It's the comic-book stream you'd put on while you fall asleep.
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