07. Hogwarts Broom Flight Simulator

# 07. Hogwarts Broom Flight Simulator

Build a visually exciting 3D broom-flight simulator set around Hogwarts. The page opens and immediately begins an automated cinematic flight around the castle grounds. The camera follows a single wizard student riding a broom, weaving through dramatic paths without hitting walls, towers, trees, cliffs, or stadium structures.

The point is spectacle, atmosphere, and motion: show the castle, the stadium, the lake, the bridges, the towers, and the scary forest in a way that feels alive and thrilling.

## What to Make

A full-screen 3D scene rendered into a <canvas>. The player character is a young wizard on a broom, seen from a third-person chase camera. The broom automatically follows a series of cinematic flight paths around the world.

The simulation must feel like a magical aerial tour, not a static model viewer.

The flight path should include:

1. **Castle Arrival**
   - Start high above misty hills.
   - Dive toward the Hogwarts-style castle.
   - Circle the tallest towers.
   - Fly past windows, bridges, courtyards, rooftops, and spires.
   - Avoid clipping through geometry.

2. **Castle Close Pass**
   - Glide low over the main courtyard.
   - Pass between towers and over stone walkways.
   - Show warm glowing windows and large castle silhouettes.
   - Use banking turns and camera sway for speed.

3. **Stadium Run**
   - Fly out toward a large Quidditch-style stadium.
   - The stadium must be huge, readable, and exciting.
   - Include tall spectator towers, colored banners, circular hoops, and an open pitch.
   - The broom should race through or around the hoops, then spiral upward above the stadium.

4. **Lake and Bridge**
   - Sweep across a dark reflective lake.
   - Fly under or beside a stone bridge.
   - Show castle reflections or shimmering water highlights.

5. **Scary Forest**
   - Enter the edge of a dark forbidden forest.
   - The trees should be tall, dense, twisted, and atmospheric.
   - Use fog, moonlight shafts, moving shadows, and glowing eyes or magical sparks in the distance.
   - The flight path should skim through clear gaps between trees without collisions.

6. **Final Hero Shot**
   - Pull back into a wide orbit showing the castle, stadium, lake, and forest together.
   - End by looping smoothly back into the opening flight path.

## Controls

The scene runs automatically, but include simple optional controls:

- **Space**: pause or resume the auto-flight
- **Arrow Left / Arrow Right**: switch to previous or next cinematic route
- **M**: toggle cinematic camera mode
- **F**: toggle faster flight

Do not require controls to enjoy the page. It should look impressive immediately on load.

## Always-Visible HUD

Top-right corner:

- **FPS**
- **Current route name**
- **Speed**
- **Camera mode**

Bottom-left:

- Small controls hint:
  "Auto-flight · Space pause · arrows change route · M camera · F speed"

The hint fades after 6 seconds.

## World Requirements

The world must include:

- A large multi-tower castle with recognizable silhouette
- A dramatic stadium with hoops, banners, towers, and an open pitch
- A dark forest with dense trees and fog
- A lake or water surface
- Stone bridges or elevated paths
- Rolling terrain around the grounds
- Sky, fog, lighting, and atmosphere

## Flight Requirements

The broom path must be interesting and safe:

- No flying through walls, towers, roofs, trees, hoops, or terrain
- Use smooth curved paths, not straight-line teleporting
- Include climbs, dives, banks, spirals, close passes, and wide reveals
- Camera should lag slightly behind the broom for cinematic motion
- Broom should tilt into turns and pitch during climbs/dives
- Path should loop seamlessly

## Visual Rules

- Full-screen 3D, no landing page
- The castle must be the visual centerpiece
- The stadium must feel large and exciting, not like a flat field
- The forest must feel genuinely dark and intimidating
- Use real lighting: moonlight, warm window lights, fog, and shadows
- Use procedural or locally shipped assets only
- No external textures fetched at runtime
- Avoid default-looking cubes. Shape the castle with towers, roofs, arches, bridges, windows, and layered stone forms
- Make the broom rider readable from a distance: cloak, body, broom silhouette, scarf or trailing fabric

## Hard Requirements

- Single index.html
- No build step
- WebGL via Three.js, Babylon.js, regl, or raw WebGL2
- Any CDN libraries must be listed in manifest.json.externalAssets
- Smooth at 30fps on a 2020 laptop at 1280x800
- Keyboard accessible
- lang="en" on <html>
- Honor prefers-reduced-motion:
  - Slow camera banking
  - Disable intense shake
  - Reduce particles and fog animation
  - Keep auto-flight functional