Comprehensive fix: controls, camera, visibility

Critical bugs fixed:
- Drone spawned facing AWAY from first gate (heading=PI wrong)
-> set to 0 so local -Z aligns with -Z world travel
- Initial throttle = 0 caused immediate ground drop
-> spawn + reset use HOVER_THROTTLE (0.60)
- Gate torus lay FLAT on the ground (rotation.x = PI/2 bug)
-> now oriented via lookAt() using auto-computed travel
direction from previous waypoint
- Gate pass-plane normal pointed the wrong way
-> use gate.forward, flipped sign in testPass
- FPV camera copied full drone quaternion so world spun on
every roll input -> both modes now use yaw-only forward
with stable world-up; FPV adds optional pitch, no roll

Control tuning:
- Rates lowered (pitch 2.4, yaw 1.9, roll 2.8 rad/s)
- RATE_RESPONSE softened (9.0 -> 6.5)
- Drag bumped (0.55 -> 0.9) for stable hover
- Throttle slew calmed (2.8 -> 1.6)

Visibility:
- Fog pushed far (near 40->120, far 420->900, camera far 1200->2000)
- Warmer fog tint so horizon blends with sunset
- Ambient light +90%, added HemisphereLight fill
- Exposure 1.1 -> 1.25
- Chase camera is now the default (FPV on Tab)
- Chase cam: wider FOV 70->72, tighter offset tuning
- Every gate has a numbered billboard + breathing glow;
the NEXT gate gets a tall cyan sky beacon column that
reads from anywhere on the map
- HUD now shows a cyan directional arrow pointing at the
next gate with live meters-to-gate readout
- HUD pitch/roll extraction moved off Euler (gimbal-safe)

Countdown/pause phases now drive the camera + mesh sync
so the opening shot composes cleanly instead of showing
the world origin.

js/config.js

@@ -7,66 +7,66 @@
 // ── Drone physics ────────────────────────────────────────
 // Thrust magnitude when throttle = 1.0 (gravity is 9.81,
 // so MAX_THRUST > 9.81 means we can hover + climb).
-export const MAX_THRUST     = 22;   // m/s^2 acceleration along drone local +Y
-export const GRAVITY        = 9.81; // m/s^2, world -Y
-export const DRAG_LINEAR    = 0.55; // per-second linear velocity damping
-export const DRAG_ANGULAR   = 4.0;  // per-second angular velocity damping
+// Hover throttle ≈ GRAVITY / MAX_THRUST.
+export const MAX_THRUST     = 17;   // ~58% hover, 42% headroom
+export const GRAVITY        = 9.81;
+export const DRAG_LINEAR    = 0.9;  // stronger air drag for stable feel
+export const DRAG_ANGULAR   = 5.5;
 
-// Input → target angular-rate (acro mode has no level lock)
-export const PITCH_RATE     = 3.8;  // rad/s at full stick
-export const YAW_RATE       = 2.4;
-export const ROLL_RATE      = 4.6;
+// Input → target angular-rate. Tuned down from raw acro
+// to keep the sim readable with keyboard-only input.
+export const PITCH_RATE     = 2.4;
+export const YAW_RATE       = 1.9;
+export const ROLL_RATE      = 2.8;
 
-// How quickly commanded rates override current angular velocity.
-// Higher = snappier / twitchier; lower = floaty.
-export const RATE_RESPONSE  = 9.0;  // 1/s
+// How quickly commanded rates override current angular
+// velocity. Softer than competitive acro.
+export const RATE_RESPONSE  = 6.5;
 
 // Throttle slew so spamming Space/Shift doesn't teleport thrust.
-export const THROTTLE_SLEW  = 2.8;  // 0..1 per second (full travel ~0.36s)
+export const THROTTLE_SLEW  = 1.6;
+
+// Default hover throttle (applied on spawn + reset).
+export const HOVER_THROTTLE = 0.60;
 
 // ── Track / gates ────────────────────────────────────────
 export const GATE_COUNT     = 10;
-export const GATE_RADIUS    = 4.2;   // inner radius (pass if <= this)
-export const GATE_TUBE      = 0.32;  // torus tube radius (visual thickness)
+export const GATE_RADIUS    = 5.0;   // slightly bigger — more forgiving
+export const GATE_TUBE      = 0.38;
 export const TOTAL_LAPS     = 3;
 
-// Gate pass detection tolerance along the normal axis
-// (how "in front of" vs "behind" counts as crossing).
-export const GATE_PLANE_EPS = 0.15;
+// Gate pass detection tolerance along the normal axis.
+export const GATE_PLANE_EPS = 0.2;
 
 // ── Off-course recovery ──────────────────────────────────
-// If the drone strays too far from the previous gate, snap
-// back to a hover checkpoint. Radius is large so it only
-// triggers on genuine failures, not near-misses.
-export const OFF_COURSE_RADIUS = 80;
-export const RESET_HOVER_Y     = 6;   // altitude of reset hover
+export const OFF_COURSE_RADIUS = 95;
+export const RESET_HOVER_Y     = 8;
 
 // ── Camera ───────────────────────────────────────────────
-export const FOV_FPV        = 95;    // wide FOV like a real FPV quad
-export const FOV_CHASE      = 70;
-export const CAMERA_TILT    = 0.42;  // radians forward-tilt in FPV (~24°)
-export const CHASE_DIST     = 5.2;
-export const CHASE_HEIGHT   = 1.8;
+export const FOV_FPV        = 90;
+export const FOV_CHASE      = 72;
+export const CAMERA_TILT    = 0.22;  // mild forward tilt in FPV
+export const CHASE_DIST     = 7.5;
+export const CHASE_HEIGHT   = 2.8;
 
 // ── World ────────────────────────────────────────────────
-export const SUN_BASE_ANGLE   = 0.12;  // sun elevation at race start (rad)
-export const SUN_DROP_PER_LAP = 0.04;  // sun descends each completed lap
-export const FOG_NEAR         = 40;
-export const FOG_FAR          = 420;
+export const SUN_BASE_ANGLE   = 0.12;
+export const SUN_DROP_PER_LAP = 0.035;
+export const FOG_NEAR         = 120;  // pushed out — gates read at distance
+export const FOG_FAR          = 900;
 
 // ── Colors ───────────────────────────────────────────────
-export const C_NEXT_GATE   = 0x00eaff; // highlighted next gate
-export const C_FUTURE_GATE = 0xff6a3d; // upcoming dim gates
-export const C_DONE_GATE   = 0x6b3a66; // already-passed gates
+export const C_NEXT_GATE   = 0x00eaff; // next gate = cyan
+export const C_FUTURE_GATE = 0xff6a3d; // upcoming = warm orange
+export const C_DONE_GATE   = 0x5a2456; // passed = muted violet
 export const C_FLASH       = 0xffffff;
+export const C_BEACON      = 0x00eaff; // sky beacon column
 
 // ── Utilities ────────────────────────────────────────────
 export function clamp(v, lo, hi) { return v < lo ? lo : (v > hi ? hi : v); }
 export function lerp(a, b, t)    { return a + (b - a) * t; }
 export function rand(a, b)       { return a + Math.random() * (b - a); }
 
-// Exponential smoothing that is framerate-independent:
-// result approaches `target` with time constant `tau` seconds.
 export function smoothDamp(current, target, tau, dt) {
   if (tau <= 0) return target;
   const alpha = 1 - Math.exp(-dt / tau);

js/drone-physics.js

@@ -8,65 +8,59 @@ import * as THREE from 'three';
 import {
   MAX_THRUST, GRAVITY, DRAG_LINEAR, DRAG_ANGULAR,
   PITCH_RATE, YAW_RATE, ROLL_RATE, RATE_RESPONSE,
-  THROTTLE_SLEW, clamp,
+  THROTTLE_SLEW, HOVER_THROTTLE, clamp,
 } from './config.js';
 
-const UP_LOCAL = new THREE.Vector3(0, 1, 0); // drone thrust axis
-const GRAVITY_VEC = new THREE.Vector3(0, -GRAVITY, 0);
+const UP_LOCAL = new THREE.Vector3(0, 1, 0);
+const Y_AXIS   = new THREE.Vector3(0, 1, 0);
 
-export function createDrone(initialPos, initialHeading = 0) {
+/**
+ * Build a drone quaternion for a given yaw heading where
+ * heading = 0 means facing -Z (so the drone looks down the
+ * course on spawn when the first gate is in -Z direction).
+ */
+function quatFromHeading(heading) {
+  return new THREE.Quaternion().setFromAxisAngle(Y_AXIS, heading);
+}
+
+export function createDrone(initialPos, initialHeading = 0, initialThrottle = HOVER_THROTTLE) {
   const state = {
     position: initialPos.clone(),
     velocity: new THREE.Vector3(),
-    // Start upright, facing +Z rotated by initialHeading around Y.
-    quaternion: new THREE.Quaternion().setFromAxisAngle(
-      new THREE.Vector3(0, 1, 0), initialHeading
-    ),
-    angularVelocity: new THREE.Vector3(), // rad/s in body frame
-    throttle: 0.0,
-    // Propeller visual spin, not physical — just a fast RPM counter.
+    quaternion: quatFromHeading(initialHeading),
+    angularVelocity: new THREE.Vector3(),
+    throttle: initialThrottle,
     propPhase: 0,
   };
 
-  // Reusable scratch objects to avoid per-frame allocation in the loop.
+  // Reusable scratch.
   const _thrustLocal = new THREE.Vector3();
   const _thrustWorld = new THREE.Vector3();
   const _dq          = new THREE.Quaternion();
   const _euler       = new THREE.Euler();
-  const _axis        = new THREE.Vector3();
 
-  /**
-   * Advance one physics step.
-   * @param {object} input - { pitch, yaw, roll, throttleDelta } all in [-1, 1]
-   * @param {number} dt    - seconds
-   */
   function step(input, dt) {
     if (dt <= 0) return;
 
-    // ── 1. Throttle slew ─────────────────────────────────
-    const throttleTarget = clamp(state.throttle + input.throttleDelta * THROTTLE_SLEW * dt, 0, 1);
-    state.throttle = throttleTarget;
+    // 1. Throttle slew
+    state.throttle = clamp(
+      state.throttle + input.throttleDelta * THROTTLE_SLEW * dt, 0, 1
+    );
 
-    // ── 2. Angular velocity ──────────────────────────────
-    // Commanded body rates from input (acro mode: no auto-level).
-    const cmdPitch =  input.pitch * PITCH_RATE;
-    const cmdYaw   =  input.yaw   * YAW_RATE;
-    const cmdRoll  =  input.roll  * ROLL_RATE;
+    // 2. Angular rate command
+    const cmdPitch = input.pitch * PITCH_RATE;
+    const cmdYaw   = input.yaw   * YAW_RATE;
+    const cmdRoll  = input.roll  * ROLL_RATE;
 
-    // Smoothly approach commanded rates. Using framerate-independent
-    // exponential lerp: rate = 1 - exp(-RATE_RESPONSE*dt).
     const rateAlpha = 1 - Math.exp(-RATE_RESPONSE * dt);
     state.angularVelocity.x += (cmdPitch - state.angularVelocity.x) * rateAlpha;
     state.angularVelocity.y += (cmdYaw   - state.angularVelocity.y) * rateAlpha;
     state.angularVelocity.z += (cmdRoll  - state.angularVelocity.z) * rateAlpha;
 
-    // Angular drag (small — drone keeps spinning in acro).
-    const angDrag = Math.max(0, 1 - DRAG_ANGULAR * dt * 0.25);
+    const angDrag = Math.max(0, 1 - DRAG_ANGULAR * dt * 0.12);
     state.angularVelocity.multiplyScalar(angDrag);
 
-    // ── 3. Integrate orientation ─────────────────────────
-    // Build the small-rotation quaternion for this step from the
-    // body-frame angular velocity, then right-multiply (body-local).
+    // 3. Integrate orientation (body-frame small-angle)
     _euler.set(
       state.angularVelocity.x * dt,
       state.angularVelocity.y * dt,
@@ -77,17 +71,15 @@ export function createDrone(initialPos, initialHeading = 0) {
     state.quaternion.multiply(_dq);
     state.quaternion.normalize();
 
-    // ── 4. Forces ────────────────────────────────────────
-    // Thrust along the drone's local +Y, transformed to world space.
+    // 4. Forces — thrust along drone's local +Y to world
     _thrustLocal.copy(UP_LOCAL).multiplyScalar(state.throttle * MAX_THRUST);
     _thrustWorld.copy(_thrustLocal).applyQuaternion(state.quaternion);
 
-    // a = thrust + gravity - linear drag proportional to velocity
     const ax = _thrustWorld.x - state.velocity.x * DRAG_LINEAR;
-    const ay = _thrustWorld.y + GRAVITY_VEC.y - state.velocity.y * DRAG_LINEAR;
+    const ay = _thrustWorld.y - GRAVITY          - state.velocity.y * DRAG_LINEAR;
     const az = _thrustWorld.z - state.velocity.z * DRAG_LINEAR;
 
-    // ── 5. Integrate velocity + position ─────────────────
+    // 5. Integrate velocity + position
     state.velocity.x += ax * dt;
     state.velocity.y += ay * dt;
     state.velocity.z += az * dt;
@@ -96,30 +88,24 @@ export function createDrone(initialPos, initialHeading = 0) {
     state.position.y += state.velocity.y * dt;
     state.position.z += state.velocity.z * dt;
 
-    // ── 6. Prop phase (visual only) ──────────────────────
-    // Spin speed tracks thrust intensity; min spin so idle props still turn.
-    state.propPhase += (6 + state.throttle * 60) * dt;
+    // 6. Prop phase
+    state.propPhase += (8 + state.throttle * 70) * dt;
 
-    // ── 7. Soft ground collision ─────────────────────────
-    // Bounce weakly on the floor so you can't tunnel; a proper
-    // crash model would destroy the drone, but for the MVP we
-    // just clamp to y=0 and kill vertical velocity.
-    if (state.position.y < 0.2) {
-      state.position.y = 0.2;
+    // 7. Ground clamp
+    if (state.position.y < 0.3) {
+      state.position.y = 0.3;
       if (state.velocity.y < 0) state.velocity.y = 0;
     }
   }
 
-  /** Reset the drone to a hover at a given world position + heading. */
-  function resetToHover(pos, heading) {
+  function resetToHover(pos, heading, throttle = HOVER_THROTTLE) {
     state.position.copy(pos);
     state.velocity.set(0, 0, 0);
-    state.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), heading);
+    state.quaternion.copy(quatFromHeading(heading));
     state.angularVelocity.set(0, 0, 0);
-    state.throttle = 0.55; // mid-throttle so you don't fall on reset
+    state.throttle = throttle;
   }
 
-  /** Forward unit vector in world space (drone nose direction). */
   function getForward(out) {
     out.set(0, 0, -1).applyQuaternion(state.quaternion);
     return out;

js/environment.js

@@ -10,7 +10,8 @@ import {
 
 export function createEnvironment(scene, renderer) {
   // ── Background fog for depth cues ─────────────────────
-  scene.fog = new THREE.Fog(0x3a1048, FOG_NEAR, FOG_FAR);
+  // Warm sunset tint so distant geometry blends with sky.
+  scene.fog = new THREE.Fog(0x5a1838, FOG_NEAR, FOG_FAR);
 
   // ── Sky dome: vertical sunset gradient on the inside of
   //    a large inverted sphere (shader-free, works on HF
@@ -116,10 +117,16 @@ export function createEnvironment(scene, renderer) {
   scene.add(mountainGroup);
 
   // ── Lighting ──────────────────────────────────────────
-  const ambient = new THREE.AmbientLight(0xffb98a, 0.55);
+  // Brighter ambient so drone + gates stay readable even when
+  // the sunset casts long shadows across them.
+  const ambient = new THREE.AmbientLight(0xffc99a, 1.05);
   scene.add(ambient);
 
-  const sun = new THREE.DirectionalLight(0xffd2a0, 1.35);
+  // Hemispheric fill — sky-to-ground color bleed for free contrast.
+  const hemi = new THREE.HemisphereLight(0xffd0a0, 0x2a0a22, 0.6);
+  scene.add(hemi);
+
+  const sun = new THREE.DirectionalLight(0xffe2b0, 1.75);
   sun.position.set(120, 90, 200);
   sun.castShadow = true;
   sun.shadow.mapSize.set(1024, 1024);

js/game.js

@@ -9,7 +9,7 @@ import * as THREE from 'three';
 import {
   TOTAL_LAPS, FOV_FPV, FOV_CHASE, CAMERA_TILT,
   CHASE_DIST, CHASE_HEIGHT, OFF_COURSE_RADIUS, RESET_HOVER_Y,
-  clamp, smoothDamp,
+  HOVER_THROTTLE, clamp, smoothDamp,
 } from './config.js';
 import { createDrone }        from './drone-physics.js';
 import { createDroneMesh }    from './drone-mesh.js';
@@ -28,23 +28,31 @@ renderer.setSize(window.innerWidth, window.innerHeight, false);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 renderer.toneMapping = THREE.ACESFilmicToneMapping;
-renderer.toneMappingExposure = 1.1;
+renderer.toneMappingExposure = 1.25;
 
 const scene = new THREE.Scene();
+// Start with chase FOV since chase is the default camera now.
 const camera = new THREE.PerspectiveCamera(
-  FOV_FPV, window.innerWidth / window.innerHeight, 0.1, 1200
+  FOV_CHASE, window.innerWidth / window.innerHeight, 0.1, 2000
 );
-camera.position.set(0, 8, 50);
 
 // ── World + drone + track ───────────────────────────────
 const env = createEnvironment(scene, renderer);
 const droneMesh = createDroneMesh();
 scene.add(droneMesh.group);
 
-const spawnPos = new THREE.Vector3(0, 6, 56);
-const drone = createDrone(spawnPos, Math.PI); // facing -Z (into the course)
+// Spawn matches gate-track's SPAWN_POS so orientation math agrees.
+// Heading = 0 means drone faces -Z (toward the first gate).
+const spawnPos = new THREE.Vector3(0, 8, 60);
+const drone = createDrone(spawnPos, 0, HOVER_THROTTLE);
 const track = createGateTrack(scene);
 
+// Park the camera behind the drone at startup so the very
+// first frame (before the loop runs updateCamera) composes
+// a sensible shot instead of a random origin view.
+camera.position.set(spawnPos.x, spawnPos.y + CHASE_HEIGHT, spawnPos.z + CHASE_DIST);
+camera.lookAt(spawnPos.x, spawnPos.y + 0.5, spawnPos.z - 6);
+
 // ── HUD + sound ─────────────────────────────────────────
 const hud = createHUD();
 const sound = createDroneSound();
@@ -58,10 +66,11 @@ const gameState = {
   currentLapStartTime: 0,
   bestLapTime: null,
   lastLapTime: null,
-  lapSplits: [], // times at which each gate was passed on the best lap
+  lapSplits: [],
   currentSplits: [],
   finishTime: null,
-  cameraMode: 'fpv', // 'fpv' | 'chase'
+  // Chase camera is the default — FPV is disorienting for new players.
+  cameraMode: 'chase', // 'chase' | 'fpv'
   offCourseFlash: 0,
 };
 
@@ -73,7 +82,7 @@ window.addEventListener('keydown', (e) => {
   if (e.code === 'KeyR') resetRace();
   if (e.code === 'Tab') {
     e.preventDefault();
-    gameState.cameraMode = gameState.cameraMode === 'fpv' ? 'chase' : 'fpv';
+    gameState.cameraMode = gameState.cameraMode === 'chase' ? 'fpv' : 'chase';
     camera.fov = gameState.cameraMode === 'fpv' ? FOV_FPV : FOV_CHASE;
     camera.updateProjectionMatrix();
   }
@@ -185,37 +194,72 @@ function sampleInput() {
 }
 
 // ── Camera follow ───────────────────────────────────────
-const cameraOffset = new THREE.Vector3();
-const cameraLookAt = new THREE.Vector3();
-const tiltQuat     = new THREE.Quaternion().setFromAxisAngle(
-  new THREE.Vector3(1, 0, 0), -CAMERA_TILT
-);
-const fpvLocalOffset = new THREE.Vector3(0, 0.2, 0);
+// Both FPV and chase modes derive a *yaw-only* heading from
+// the drone so the camera horizon stays stable regardless of
+// how hard the drone is rolling. This is the single biggest
+// "FPV comfort" fix — raw quaternion coupling makes the world
+// spin when the drone banks.
+const _camFwd     = new THREE.Vector3();
+const _camDesired = new THREE.Vector3();
+const _camLookAt  = new THREE.Vector3();
+const _camUp      = new THREE.Vector3(0, 1, 0);
+
+function getDroneYawForward() {
+  // Project the drone's local -Z onto the XZ plane and renormalize.
+  _camFwd.set(0, 0, -1).applyQuaternion(drone.state.quaternion);
+  _camFwd.y = 0;
+  if (_camFwd.lengthSq() < 0.001) _camFwd.set(0, 0, -1);
+  return _camFwd.normalize();
+}
 
 function updateCamera(dt) {
-  if (gameState.cameraMode === 'fpv') {
-    // Lock camera to drone with slight forward tilt.
-    cameraOffset.copy(fpvLocalOffset).applyQuaternion(drone.state.quaternion);
-    camera.position.copy(drone.state.position).add(cameraOffset);
-    const targetQuat = drone.state.quaternion.clone().multiply(tiltQuat);
-    camera.quaternion.slerp(targetQuat, 0.35);
+  const fwd = getDroneYawForward();
+
+  if (gameState.cameraMode === 'chase') {
+    // Trail behind the drone on a horizontal plane with a
+    // fixed height offset. Smoothly damped so the cam lags
+    // the drone gracefully instead of snapping.
+    _camDesired.copy(drone.state.position)
+      .addScaledVector(fwd, -CHASE_DIST);
+    _camDesired.y += CHASE_HEIGHT;
+
+    const tau = 0.18;
+    camera.position.x = smoothDamp(camera.position.x, _camDesired.x, tau, dt);
+    camera.position.y = smoothDamp(camera.position.y, _camDesired.y, tau, dt);
+    camera.position.z = smoothDamp(camera.position.z, _camDesired.z, tau, dt);
+
+    // Look slightly ahead of the drone (gives a sense of speed).
+    _camLookAt.copy(drone.state.position)
+      .addScaledVector(fwd, 6)
+      .add(new THREE.Vector3(0, 0.5, 0));
+    camera.up.copy(_camUp);
+    camera.lookAt(_camLookAt);
   } else {
-    // Chase cam: trail behind the drone, look at it.
-    const fwd = new THREE.Vector3(0, 0, -1).applyQuaternion(drone.state.quaternion);
-    const desired = drone.state.position.clone()
-      .sub(fwd.clone().multiplyScalar(CHASE_DIST))
-      .add(new THREE.Vector3(0, CHASE_HEIGHT, 0));
-    camera.position.x = smoothDamp(camera.position.x, desired.x, 0.12, dt);
-    camera.position.y = smoothDamp(camera.position.y, desired.y, 0.12, dt);
-    camera.position.z = smoothDamp(camera.position.z, desired.z, 0.12, dt);
-    cameraLookAt.copy(drone.state.position).add(fwd.clone().multiplyScalar(4));
-    camera.lookAt(cameraLookAt);
+    // Stable FPV — camera sits at drone position + tiny offset,
+    // looks along the drone's *yaw-only* forward vector with a
+    // slight downward pitch from the pitch component. No roll.
+    camera.position.copy(drone.state.position);
+    camera.position.y += 0.35;
+
+    // Extract pitch from the full quaternion so the camera still
+    // pitches up/down with the drone (useful for climbing/diving).
+    const fullFwd = new THREE.Vector3(0, 0, -1).applyQuaternion(drone.state.quaternion);
+    const pitch = Math.asin(clamp(fullFwd.y, -1, 1));
+    const pitchFwd = new THREE.Vector3(
+      fwd.x * Math.cos(pitch * 0.6),
+      Math.sin(pitch * 0.6) - CAMERA_TILT,
+      fwd.z * Math.cos(pitch * 0.6)
+    ).normalize();
+
+    _camLookAt.copy(drone.state.position).addScaledVector(pitchFwd, 10);
+    camera.up.copy(_camUp);
+    camera.lookAt(_camLookAt);
   }
 }
 
 // ── Race logic ──────────────────────────────────────────
 function resetRace() {
-  drone.resetToHover(spawnPos, Math.PI);
+  drone.resetToHover(spawnPos, 0, HOVER_THROTTLE);
   track.resetForLap();
   gameState.phase = 'countdown';
   gameState.countdown = 3.2;
@@ -227,15 +271,17 @@ function resetRace() {
 }
 
 function resetToCheckpoint() {
-  // Snap back to just before the next gate with a small offset.
+  // Snap back to 14m *in front* of the next gate (i.e. against the
+  // travel direction) so the drone re-approaches it head-on.
   const next = track.getNextGate();
   if (!next) return;
-  const back = next.normal.clone().multiplyScalar(14);
+  const back = next.forward.clone().multiplyScalar(-14);
   const pos = next.position.clone().add(back);
   pos.y = Math.max(pos.y, RESET_HOVER_Y);
-  // Heading = toward gate
-  const heading = Math.atan2(-next.normal.x, -next.normal.z);
-  drone.resetToHover(pos, heading);
+  // Heading such that drone faces along the gate's travel direction.
+  // forward = (-sin h, 0, -cos h)  =>  h = atan2(-forward.x, -forward.z)
+  const heading = Math.atan2(-next.forward.x, -next.forward.z);
+  drone.resetToHover(pos, heading, HOVER_THROTTLE);
   gameState.offCourseFlash = 1.5;
 }
 
@@ -389,7 +435,10 @@ function loop() {
   if (dt > 0.1) dt = 0.1; // cap after tab-switch
   accumulator += dt;
 
-  // Countdown phase
+  // Countdown phase — physics paused, but we still need to
+  // sync the visual mesh + drive the camera so the player
+  // sees the drone sitting on the line instead of an empty
+  // origin shot.
   if (gameState.phase === 'countdown') {
     gameState.countdown -= dt;
     updateCountdown();
@@ -399,13 +448,18 @@ function loop() {
       gameState.currentLapStartTime = now;
       sound.start();
     }
-    // Still render the scene behind the countdown.
+    droneMesh.group.position.copy(drone.state.position);
+    droneMesh.group.quaternion.copy(drone.state.quaternion);
+    droneMesh.spinProps(drone.state.propPhase += dt * 12);
+    track.update(drone.state.position, drone.state.position, dt);
+    updateCamera(dt);
     renderer.render(scene, camera);
     return;
   }
 
-  // Pause phase: just draw what we had.
+  // Pause phase: still drive the camera so it doesn't freeze oddly.
   if (gameState.phase === 'paused') {
+    updateCamera(dt);
     renderer.render(scene, camera);
     return;
   }
@@ -454,15 +508,18 @@ function loop() {
   const speed = drone.state.velocity.length();
   sound.update(drone.state.throttle, speed, dt);
 
-  // HUD
-  const euler = new THREE.Euler().setFromQuaternion(drone.state.quaternion, 'YXZ');
-  const pitchRad = euler.x;
-  const rollRad  = euler.z;
+  // HUD — decompose drone orientation into pitch/roll. Use
+  // forward+right vectors instead of Euler extraction which
+  // has gimbal-lock artefacts at high pitch angles.
+  const fwdVec   = new THREE.Vector3(0, 0, -1).applyQuaternion(drone.state.quaternion);
+  const rightVec = new THREE.Vector3(1, 0, 0).applyQuaternion(drone.state.quaternion);
+  const pitchRad = Math.asin(clamp(fwdVec.y, -1, 1));
+  const rollRad  = Math.asin(clamp(rightVec.y, -1, 1));
   const altitude = drone.state.position.y;
   const curLapTime = gameState.phase === 'racing'
     ? now - gameState.currentLapStartTime : 0;
 
-  // Real-time delta vs best: compare current split to best split at same gate index.
+  // Real-time delta vs best.
   let delta = null;
   if (gameState.bestLapTime !== null && gameState.phase === 'racing') {
     const idx = track.getNextGateIndex();
@@ -473,6 +530,26 @@ function loop() {
 
   if (gameState.offCourseFlash > 0) gameState.offCourseFlash -= dt;
 
+  // Next-gate direction arrow: compute the 2D angle from the
+  // drone's yaw-forward to the vector pointing at the next gate.
+  let gateArrowAngle = null;  // radians, 0 = dead ahead, + = right
+  let gateDistance   = null;
+  const nextGate = track.getNextGate();
+  if (nextGate) {
+    const dx = nextGate.position.x - drone.state.position.x;
+    const dz = nextGate.position.z - drone.state.position.z;
+    gateDistance = Math.hypot(dx, dz);
+    // Drone yaw-forward = fwdVec flattened to XZ plane.
+    const fx = fwdVec.x, fz = fwdVec.z;
+    const flen = Math.hypot(fx, fz) || 1;
+    const fnx = fx / flen, fnz = fz / flen;
+    // Angle between drone-forward and gate-direction in world XZ.
+    // Cross-product sign tells us left/right.
+    const dot = (fnx * dx + fnz * dz) / (gateDistance || 1);
+    const cross = (fnx * dz - fnz * dx); // sign only
+    gateArrowAngle = Math.atan2(cross, dot);
+  }
+
   hud.draw({
     speed, throttle: drone.state.throttle, altitude,
     pitch: pitchRad, roll: rollRad,
@@ -483,6 +560,7 @@ function loop() {
     bestLapTime: gameState.bestLapTime,
     deltaVsBest: delta,
     offCourseFlash: gameState.offCourseFlash > 0,
+    gateArrowAngle, gateDistance,
   });
 
   renderer.render(scene, camera);

js/gate-track.js

@@ -1,43 +1,58 @@
 // ═══════════════════════════════════════════════════════
 //  GATE TRACK — sequence of neon torus gates placed in 3D
-//  space. Exposes the gate list, pass-through detection
-//  (line-segment vs gate plane), and a per-frame update
-//  that handles the highlight color of the "next" gate
-//  and flash effect on clean pass.
+//  space. Gates are oriented by computing a "travel
+//  direction" from the previous waypoint to the current
+//  one (so the drone always approaches head-on). Next
+//  gate gets a tall sky beacon column and a breathing
+//  glow so it reads from anywhere on the map.
 // ═══════════════════════════════════════════════════════
 import * as THREE from 'three';
 import {
   GATE_COUNT, GATE_RADIUS, GATE_TUBE, GATE_PLANE_EPS,
-  C_NEXT_GATE, C_FUTURE_GATE, C_DONE_GATE, C_FLASH,
+  C_NEXT_GATE, C_FUTURE_GATE, C_DONE_GATE, C_FLASH, C_BEACON,
 } from './config.js';
 
+// Spawn position is where the drone starts — used to orient
+// the first gate so it faces the drone directly.
+const SPAWN_POS = new THREE.Vector3(0, 8, 60);
+
 /**
- * Generate the gate positions + orientations for a single lap.
- * The track is a figure-8-ish loop with vertical variation.
+ * Raw waypoint positions. Each gate's orientation is derived
+ * from the vector from the previous waypoint (or spawn, for
+ * index 0) to this waypoint, so the course is auto-oriented.
  */
 function buildGatePath() {
-  const gates = [];
-  // Parametric loop: spiral-ish canyon.
-  // Keep it tight enough to memorize, open enough to fly.
   const waypoints = [
-    { x:   0, y:  6, z:  40, heading:  Math.PI      },
-    { x:  28, y:  9, z:  20, heading:  Math.PI * 0.65 },
-    { x:  38, y: 14, z: -12, heading:  Math.PI * 0.35 },
-    { x:  18, y: 18, z: -38, heading:  Math.PI * 0.0  },
-    { x: -14, y: 22, z: -46, heading: -Math.PI * 0.25 },
-    { x: -38, y: 16, z: -22, heading: -Math.PI * 0.55 },
-    { x: -40, y: 10, z:  14, heading: -Math.PI * 0.85 },
-    { x: -18, y:  8, z:  34, heading:  Math.PI * 0.95 },
-    { x:  -2, y: 12, z:  48, heading:  Math.PI        },
-    { x:  16, y:  7, z:  44, heading:  Math.PI * 0.82 },
+    { x:   0, y:  8, z:  30 }, // 0 — straight ahead from spawn
+    { x:  16, y: 11, z:   5 }, // 1 — bank right
+    { x:  30, y: 14, z: -20 }, // 2 — right curve, climbing
+    { x:  18, y: 18, z: -44 }, // 3 — top of right-side climb
+    { x:  -8, y: 22, z: -55 }, // 4 — apex over the center
+    { x: -30, y: 18, z: -40 }, // 5 — descending left-side
+    { x: -38, y: 13, z: -14 }, // 6 — left sweep
+    { x: -26, y:  9, z:  10 }, // 7 — coming back home
+    { x:  -8, y:  8, z:  32 }, // 8 — home stretch left
+    { x:  12, y:  8, z:  46 }, // 9 — last gate, near spawn
   ];
-  // If GATE_COUNT ever differs, tile the waypoints.
+
+  const gates = [];
   for (let i = 0; i < GATE_COUNT; i++) {
     const w = waypoints[i % waypoints.length];
+    const prev = i === 0 ? SPAWN_POS : waypoints[(i - 1) % waypoints.length];
+    // Travel direction = normalized (this - prev), this is the
+    // direction the drone flies THROUGH the gate. Ignore the
+    // vertical component so gates stay upright (torus axis is
+    // horizontal, ring is vertical, drone flies through).
+    const dx = w.x - prev.x;
+    const dz = w.z - prev.z;
+    const len = Math.hypot(dx, dz) || 1;
+    const forward = new THREE.Vector3(dx / len, 0, dz / len);
+
     gates.push({
       index: i,
       position: new THREE.Vector3(w.x, w.y, w.z),
-      heading: w.heading, // rotation around Y axis; gate faces this way
+      forward,       // unit vector, direction of travel through gate
+      passed: false,
     });
   }
   return gates;
@@ -46,44 +61,78 @@ function buildGatePath() {
 export function createGateTrack(scene) {
   const gates = buildGatePath();
 
-  // Shared geometry — one torus for all gates.
-  const torusGeo = new THREE.TorusGeometry(GATE_RADIUS, GATE_TUBE, 10, 40);
+  // Shared geometries.
+  const torusGeo = new THREE.TorusGeometry(GATE_RADIUS, GATE_TUBE, 12, 48);
+  const glowGeo  = new THREE.TorusGeometry(GATE_RADIUS + 0.35, GATE_TUBE * 0.45, 10, 48);
+  // Beacon column: tall thin cylinder that rises from ground to sky.
+  const beaconGeo = new THREE.CylinderGeometry(0.45, 0.45, 80, 8, 1, true);
+
+  const _tmpTarget = new THREE.Vector3();
 
-  // Per-gate mesh + outer glow mesh.
   for (const g of gates) {
+    // ── Main ring ──
     const mat = new THREE.MeshBasicMaterial({ color: C_FUTURE_GATE });
     const mesh = new THREE.Mesh(torusGeo, mat);
     mesh.position.copy(g.position);
-    // Torus lies in its local XY plane; rotate so the "opening"
-    // faces along the gate's heading vector.
-    mesh.rotation.y = g.heading;
-    mesh.rotation.x = Math.PI / 2;
+    // Orient torus so its axis (local +Z by default) points
+    // along the travel direction. lookAt rotates so local -Z
+    // points AT the target, so point at (pos - forward).
+    _tmpTarget.copy(g.position).sub(g.forward);
+    mesh.lookAt(_tmpTarget);
     scene.add(mesh);
     g.mesh = mesh;
     g.material = mat;
 
-    // A fainter, slightly larger ring for glow/bloom stand-in.
-    const glowGeo = new THREE.TorusGeometry(GATE_RADIUS + 0.25, GATE_TUBE * 0.35, 8, 40);
+    // ── Outer glow ring ──
     const glowMat = new THREE.MeshBasicMaterial({
-      color: C_FUTURE_GATE, transparent: true, opacity: 0.35,
+      color: C_FUTURE_GATE, transparent: true, opacity: 0.4,
+      depthWrite: false,
     });
     const glow = new THREE.Mesh(glowGeo, glowMat);
     glow.position.copy(mesh.position);
-    glow.rotation.copy(mesh.rotation);
+    glow.quaternion.copy(mesh.quaternion);
     scene.add(glow);
     g.glow = glow;
-
-    // Forward unit vector — used for plane math during detection.
-    g.normal = new THREE.Vector3(0, 0, 1).applyAxisAngle(
-      new THREE.Vector3(0, 1, 0), g.heading
-    );
-
-    // A small ember sprite placed in front of the gate (visible
-    // for the next gate only), a hint arrow shown by game.js.
-    g.passed = false;
+    g.glowMat = glowMat;
+
+    // ── Sky beacon column (visible from anywhere on map) ──
+    const beaconMat = new THREE.MeshBasicMaterial({
+      color: C_FUTURE_GATE,
+      transparent: true,
+      opacity: 0.0, // default hidden; turned on only for next gate
+      depthWrite: false,
+      side: THREE.DoubleSide,
+    });
+    const beacon = new THREE.Mesh(beaconGeo, beaconMat);
+    beacon.position.set(g.position.x, 40, g.position.z);
+    scene.add(beacon);
+    g.beacon = beacon;
+    g.beaconMat = beaconMat;
+
+    // ── Gate index label board (a thin sprite-like plane above the gate) ──
+    const labelCanvas = document.createElement('canvas');
+    labelCanvas.width = 128; labelCanvas.height = 64;
+    const lctx = labelCanvas.getContext('2d');
+    lctx.fillStyle = 'rgba(0,0,0,0)'; lctx.fillRect(0, 0, 128, 64);
+    lctx.fillStyle = '#ffffff';
+    lctx.font = '900 48px Orbitron, sans-serif';
+    lctx.textAlign = 'center';
+    lctx.textBaseline = 'middle';
+    lctx.shadowColor = 'rgba(0,0,0,0.9)';
+    lctx.shadowBlur = 6;
+    lctx.fillText(String(g.index + 1), 64, 34);
+    const labelTex = new THREE.CanvasTexture(labelCanvas);
+    labelTex.minFilter = THREE.LinearFilter;
+    const labelMat = new THREE.SpriteMaterial({ map: labelTex, transparent: true, depthTest: false });
+    const label = new THREE.Sprite(labelMat);
+    label.scale.set(3.5, 1.75, 1);
+    label.position.set(g.position.x, g.position.y + GATE_RADIUS + 1.2, g.position.z);
+    label.renderOrder = 10;
+    scene.add(label);
+    g.label = label;
   }
 
-  // A flash sphere used by flashAt() — reused between gates.
+  // Flash sphere reused between gates.
   const flashGeo = new THREE.SphereGeometry(GATE_RADIUS * 0.9, 24, 12);
   const flashMat = new THREE.MeshBasicMaterial({
     color: C_FLASH, transparent: true, opacity: 0.0, depthWrite: false,
@@ -93,80 +142,86 @@ export function createGateTrack(scene) {
   let flashTimer = 0;
   function triggerFlashAt(pos) {
     flashMesh.position.copy(pos);
-    flashMat.opacity = 0.75;
+    flashMat.opacity = 0.85;
     flashMesh.scale.set(0.6, 0.6, 0.6);
-    flashTimer = 0.45; // seconds
+    flashTimer = 0.5;
   }
 
   /**
-   * Test whether the line segment (prev → curr) pierces the
-   * upcoming gate's disc. Returns true on clean pass.
+   * Line segment (prev → curr) vs gate disc intersection test.
+   * Returns true if the drone passed through this gate going
+   * in the correct travel direction.
    */
   function testPass(prev, curr, gate) {
     const p = gate.position;
-    const n = gate.normal;
-    // Signed distances of endpoints to the gate plane.
-    const d0 = (prev.x - p.x) * n.x + (prev.y - p.y) * n.y + (prev.z - p.z) * n.z;
-    const d1 = (curr.x - p.x) * n.x + (curr.y - p.y) * n.y + (curr.z - p.z) * n.z;
-
-    // Forward crossing only (front → back relative to gate normal).
+    const n = gate.forward;
+    // Signed distances — positive = "in front" of gate (approach side).
+    // A point is "in front" if it is on the -forward side of the gate,
+    // so we flip the sign: d = (point - gatePos) · (-forward).
+    const d0 = -((prev.x - p.x) * n.x + (prev.y - p.y) * n.y + (prev.z - p.z) * n.z);
+    const d1 = -((curr.x - p.x) * n.x + (curr.y - p.y) * n.y + (curr.z - p.z) * n.z);
+
+    // Drone must go from "in front" (d0>0) to "behind" (d1<0).
     if (d0 < GATE_PLANE_EPS || d1 > -GATE_PLANE_EPS) return false;
 
-    // Find the intersection point on the plane.
-    const t = d0 / (d0 - d1); // 0..1
+    const t = d0 / (d0 - d1);
     if (t < 0 || t > 1) return false;
     const ix = prev.x + (curr.x - prev.x) * t;
     const iy = prev.y + (curr.y - prev.y) * t;
     const iz = prev.z + (curr.z - prev.z) * t;
 
-    // Radial distance from gate center at the intersection.
     const dx = ix - p.x;
     const dy = iy - p.y;
     const dz = iz - p.z;
-    const dist2 = dx * dx + dy * dy + dz * dz;
-    return dist2 <= GATE_RADIUS * GATE_RADIUS;
+    return (dx * dx + dy * dy + dz * dz) <= GATE_RADIUS * GATE_RADIUS;
   }
 
   let nextGateIndex = 0;
 
-  /**
-   * Called each frame with the drone's previous + current positions.
-   * If the drone passes the next gate, advances the index and
-   * triggers visual effects. Returns the gate that was passed
-   * (or null if none).
-   */
   function update(prevPos, currPos, dt) {
-    // Animate gate materials: breathing glow on next, dim on done.
+    const t = performance.now() * 0.004;
+
+    // Breathing animation + per-state coloring.
     for (let i = 0; i < gates.length; i++) {
       const g = gates[i];
       const isNext = (i === nextGateIndex);
       const isDone = g.passed;
+
       if (isNext) {
         g.material.color.setHex(C_NEXT_GATE);
-        g.glow.material.color.setHex(C_NEXT_GATE);
-        const breath = 0.55 + 0.45 * Math.abs(Math.sin(performance.now() * 0.004));
-        g.glow.material.opacity = 0.2 + 0.5 * breath;
+        g.glowMat.color.setHex(C_NEXT_GATE);
+        const breath = 0.55 + 0.45 * Math.abs(Math.sin(t));
+        g.glowMat.opacity = 0.35 + 0.55 * breath;
+        // Beacon column on.
+        g.beaconMat.color.setHex(C_BEACON);
+        g.beaconMat.opacity = 0.18 + 0.12 * breath;
+        // Label bigger
+        g.label.scale.set(5.5, 2.75, 1);
       } else if (isDone) {
         g.material.color.setHex(C_DONE_GATE);
-        g.glow.material.color.setHex(C_DONE_GATE);
-        g.glow.material.opacity = 0.15;
+        g.glowMat.color.setHex(C_DONE_GATE);
+        g.glowMat.opacity = 0.15;
+        g.beaconMat.opacity = 0.0;
+        g.label.scale.set(2.8, 1.4, 1);
       } else {
         g.material.color.setHex(C_FUTURE_GATE);
-        g.glow.material.color.setHex(C_FUTURE_GATE);
-        g.glow.material.opacity = 0.28;
+        g.glowMat.color.setHex(C_FUTURE_GATE);
+        g.glowMat.opacity = 0.35;
+        g.beaconMat.opacity = 0.0;
+        g.label.scale.set(3.5, 1.75, 1);
       }
     }
 
     // Flash decay.
     if (flashTimer > 0) {
       flashTimer -= dt;
-      const t = Math.max(0, flashTimer / 0.45);
-      flashMat.opacity = 0.75 * t;
-      const s = 0.6 + (1 - t) * 1.6;
+      const f = Math.max(0, flashTimer / 0.5);
+      flashMat.opacity = 0.85 * f;
+      const s = 0.6 + (1 - f) * 2.0;
       flashMesh.scale.set(s, s, s);
     }
 
-    // Pass detection against just the next gate.
+    // Pass detection.
     const nextGate = gates[nextGateIndex];
     if (!nextGate) return null;
     if (testPass(prevPos, currPos, nextGate)) {
@@ -178,23 +233,18 @@ export function createGateTrack(scene) {
     return null;
   }
 
-  /** Start a new lap: mark all gates unpassed, reset index. */
   function resetForLap() {
     for (const g of gates) g.passed = false;
     nextGateIndex = 0;
   }
 
-  /** Get the next gate object (for HUD arrow + AI targeting). */
-  function getNextGate() {
-    return gates[nextGateIndex] || null;
-  }
-
+  function getNextGate()      { return gates[nextGateIndex] || null; }
   function getNextGateIndex() { return nextGateIndex; }
   function getGateCount()     { return gates.length; }
   function getAllGates()      { return gates; }
 
   return {
     update, resetForLap, getNextGate, getNextGateIndex,
-    getGateCount, getAllGates,
+    getGateCount, getAllGates, SPAWN_POS,
   };
 }

js/hud.js

@@ -239,6 +239,54 @@ export function createHUD() {
     gctx.fillText(`${Math.round(altitude)}m`, aX, aBarY + aBarH + 14);
   }
 
+  // ── Next-gate direction arrow (centred on screen) ─────
+  // Drawn into the overlay canvas so it composites cleanly
+  // above the 3D scene. Angle: 0 = dead ahead, + = right.
+  function drawGateArrow(angle, distance, w) {
+    if (angle === null || angle === undefined) return;
+
+    const cx = w / 2;
+    const cy = 104; // just below the time readout
+
+    // Clamp to half-screen range so the arrow always points
+    // somewhere sensible.
+    const clamped = Math.max(-Math.PI, Math.min(Math.PI, angle));
+
+    // If the gate is close to dead-ahead, show a centered triangle.
+    // If it's off to the side, show a directional chevron.
+    octx.save();
+    octx.translate(cx, cy);
+    octx.rotate(clamped);
+
+    // Pulse scale with a little "urgency" when distance is small.
+    const near = distance !== null && distance < 30;
+    const pulse = near ? 1 + 0.1 * Math.sin(performance.now() * 0.012) : 1;
+
+    octx.shadowColor = 'rgba(0, 234, 255, 0.8)';
+    octx.shadowBlur = 14;
+    octx.fillStyle = '#00eaff';
+    octx.beginPath();
+    // Arrow shape: elongated triangle pointing up (= toward gate)
+    const s = 18 * pulse;
+    octx.moveTo(0, -s * 1.3);
+    octx.lineTo(s, s * 0.7);
+    octx.lineTo(0, s * 0.2);
+    octx.lineTo(-s, s * 0.7);
+    octx.closePath();
+    octx.fill();
+    octx.restore();
+
+    // Distance readout just below the arrow
+    if (distance !== null) {
+      octx.textAlign = 'center';
+      octx.font = '700 12px Orbitron, sans-serif';
+      octx.fillStyle = 'rgba(0, 234, 255, 0.95)';
+      octx.shadowColor = 'rgba(0, 0, 0, 0.85)';
+      octx.shadowBlur = 6;
+      octx.fillText(`${Math.round(distance)}m`, cx, cy + 32);
+    }
+  }
+
   // ── Top overlay: lap / gate / time / delta ─────────────
   function drawOverlay(data) {
     const w = overlay.width;
@@ -291,6 +339,9 @@ export function createHUD() {
       octx.fillText('NO BEST YET', w - 22, 40);
     }
 
+    // Next-gate arrow (points toward upcoming gate)
+    drawGateArrow(data.gateArrowAngle, data.gateDistance, w);
+
     // Off-track / reset warning (flashing)
     if (data.offCourseFlash) {
       const flash = Math.sin(performance.now() * 0.02) > 0;
@@ -315,7 +366,7 @@ export function createHUD() {
   // ── Main entry: called by game.js every frame ──────────
   function draw({ speed, throttle, altitude, pitch, roll, lap, totalLaps,
                   gateIdx, totalGates, currentLapTime, bestLapTime,
-                  deltaVsBest, offCourseFlash }) {
+                  deltaVsBest, offCourseFlash, gateArrowAngle, gateDistance }) {
     smoothSpeed += (speed - smoothSpeed) * 0.18;
     smoothAlt   += (altitude - smoothAlt) * 0.3;
     drawAttitude(pitch, roll);
@@ -323,6 +374,7 @@ export function createHUD() {
     drawOverlay({
       lap, totalLaps, gateIdx, totalGates,
       currentLapTime, bestLapTime, deltaVsBest, offCourseFlash,
+      gateArrowAngle, gateDistance,
     });
   }