Tokyo Rush Hour — 6pm to last train across Shibuya, Yamanote, neon alleys, and a capsule hotel
A 3D mega-world: 7 sub-locations across Tokyo at 6pm (Shibuya Scramble, Yamanote station, neon alley, konbini, capsule hotel, karaoke box, ramen yatai), 220 pedestrians on role-based AI, animated billboards, rainshower at 22:00, last train arriving.
Built with:
three.js r0.160 (single file)Custom shader sky + animated billboard shaderInstancedMesh crowd of 220 with role-based behavior
Prompt
Build a single-file HTML page that recreates "6pm to last train in Tokyo" 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.
- First body line: <!-- ROUND15_MEGA v1 -->
- 7 spatial sub-locations in one three.js scene: Shibuya Scramble Crossing, JR Yamanote Station with platform, Neon Alley with izakaya signs, Konbini with sliding doors and 24h sign, Capsule Hotel with lit pods, Karaoke Box, Ramen Yatai cart.
- Mini-map canvas in HUD showing all 7 hotspots + crowd dots + train position + active camera pin.
- 100+ named characters via combinatorial name pool. At least 10 featured cast with rotating "WHO IS" lower-thirds. 220 InstancedMesh pedestrians with role-based behavior: scramble walkers obey a traffic light, platform flow loops the station, alley wanderers loiter under signs, konbini queue forms and dissolves, karaoke loiterers idle outside.
- 5-act time arc 18:00 → 23:00 at 30× sim speed: Rush Hour → Izakaya Golden Hour → Karaoke → Late Ramen → Last Train, then reseed.
- Custom shader sky transitioning dusk to night. Animated billboard shader cycling neon ads. Rain particles + wet ground reflection between 21:00 and 22:00.
- Sliding Yamanote train arriving and departing on a ~24s cycle. Delivery cyclist threading the alley. Lit capsule pods. Traffic-light crossing logic that actually gates the scramble.
- 18 director cameras with weighted selection per act (scramble cams during rush, alley cams during golden hour, train cams at last train).
- HUD: "TOKYO LIVE" logo, JST clock, weather, act badge, camera label, mini-map, scrolling chyron with cross-system events ("ramen yatai sells out as last train pulls in"), rotating "WHO IS" lower-thirds.
Tone: warm, neon, cozy. The kind of stream people leave on while studying.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- How to fake a believable Tokyo at 6pm with seven recognizable sub-locations in one three.js scene under 40KB
- How to give a crowd of 220 InstancedMesh pedestrians five different behaviors (scramble, platform, alley, queue, loiter) without burning your frame budget
- How to schedule a five-act sim day so the cinematography, sky color, weather, and chyron all advance the same story together