The Mech Cockpit — Multi-Panel HUD, Lock-On Missiles, Footstep Shake
Hop into a battle mech. Body yaw and torso yaw are separate (real MechWarrior twist). Footstep cadence shakes the camera. Conic-sweep radar. Armor schematic. Lock-on missiles in a desert.
What this is
You're inside a mech cockpit. Angular dark frame around the screen edges. SVG-rendered HUD panels: radar (canvas conic-sweep with rotated enemy blips), armor schematic (six rects whose fills lerp cyan → orange → red), throttle, heat gauge, lock-on reticle. Procedural desert with rocks, abandoned tanks, distant ruins. WASD drives — body yaw separated from torso yaw, classic MechWarrior twist. Mouse aims an independent torso reticle. Left click chaingun (builds heat), right click missile (lock by aiming for 1.5s, then fire homing). Shift boosts (camera shake intensifies, fuel drains). Footstep cadence shakes the camera. 3-4 enemy mechs with chase + fire AI.
Why this is mind-blowing
MechWarrior was a series, with sequels, that shipped over decades. This nails its core feel — the heavy stomp, the torso twist, the multi-panel HUD, the lock-and-launch — in 1555 lines from one paragraph. The HUD alone is its own piece of art.
First-person mech cockpit combat game in three.js. The view is from
inside a mech cockpit — angular dark frame around the screen edges,
with multiple holographic HUD panels embedded (radar, weapon readout,
armor schematic, lock-on indicator, throttle, heat gauge). Procedural
desert battlefield. WASD drives the mech (heavy footstep shake). Mouse
aims a torso reticle. Left click chaingun, right click lock-on missiles.
Hold shift to boost. 3-4 enemy mechs that fight back.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Body yaw separated from torso yaw with a 0.4-rad threshold IS the MechWarrior twist mechanic. Without it, the mech feels like an FPS character. With it, the mech feels like a mech.
- SVG overlays are the right tool for cockpit HUDs. CSS positions them around the screen edges, conic-sweep radar is canvas, armor schematic is rect-fill lerps. Each updates from one shared updateHUD() call per frame.
- Footstep cadence (0.55s walking / 0.36s boosting) triggers screen shake + sub-thump. Synchronizing visual + audio + haptic cadence is what makes a mech feel like 50 tons.