Olympic Host City — 16-day Summer Games across 9 venues with cauldron, fireworks, and medal table
A 3D mega-world: 9 venues (stadium with 260-instance crowd ring, aquatics, gymnasium, velodrome, beach, weightlifting, athlete village, podium, cauldron with Points-cloud flame), 16-day Games arc, 105 named athletes from 16 nations, replay PIP and medal table.
Built with:
three.js r0.160 (single file)Procedural flag canvas textures + Points-cloud cauldron flameInstancedMesh stadium crowd of 260
Prompt
Build a single-file HTML page that recreates "the 16-day Summer Olympics in a host city" 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 — and on reseed, advance the host city through a 10-city rotation.
- First body line: <!-- ROUND15_MEGA v1 -->
- 9 spatial sub-locations / venues in one three.js scene: stadium (with a 260-instance crowd ring), aquatics, gymnasium, velodrome, beach, weightlifting, athlete village, podium, cauldron with Points-cloud flame.
- Mini-map in HUD showing all 9 venues + active hotspot.
- 16-day Games arc within ~10 minutes (DAY_LEN ≈ 37.5s). Day-by-day camera and venue bias: opening ceremony day → swimming heats → gymnastics → cycling → beach volleyball → weightlifting → track finals → closing ceremony with fireworks + cauldron extinguish.
- 100+ named characters: 25 featured athletes/coaches (named anchor commentary, podium ceremonies) + 80 roster name pool, drawn from 16 nations with procedural flag canvas textures.
- 15 director cameras auto-cycling: stadium wide, lane cam, beam cam, velodrome banking, beach low angle, weight platform, village walk, podium close, cauldron orbit, anthem zoom, fireworks chopper.
- HUD: anchor commentary lower-third, medal table, country flags row, replay picture-in-picture (PIP) with a slow-motion replay of the latest podium moment, world-record strobe banner, roar meter visualizer, fade transitions between days.
Tone: completely fictional games and nations OR generic anthropic templates. No real-world Olympic / IOC / NBC branding. The vibe is "Tokyo opening ceremony joy" not jingoism.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- How to build a 9-venue host city in a single three.js scene with each venue visually distinguishable from the air
- How to compress a 16-day arc into ~10 minutes by shifting venue/camera bias day-by-day so the cinematography itself tells the Games story
- How to use a Points-cloud flame on the cauldron + closing-day fireworks particles as the visual bookends of the entire reseed cycle