Investigations

Clause Sonic

JavaScript November 2025

A WipEout/F-Zero style anti-gravity racing game built with Three.js, featuring fog effects and a HUD.

Clause Sonic is my take on the WipEout/F-Zero anti-gravity racing genre. A futuristic ship flies along a track at high speed through atmospheric fog, with a canvas-based HUD showing speed, lap count, and position.

The 3D rendering uses Three.js with FogExp2 for atmospheric depth. The ship physics include a camera following system with configurable distance, height, smoothness, and screen shake that decays over time after impacts.

The track system is modular — separate modules handle the ship, track geometry, and controls. Texture packs provide the track surface materials. It's minimal (4 JS files), but captures the feeling of blasting through a futuristic racing tunnel.

No build toolchain — raw HTML, JavaScript, and CSS. Open the file and race.

What this project demonstrates

Three.js 3D rendering with FogExp2 atmospheric effects
Ship physics with configurable camera follow
Screen shake with decay on impacts
Canvas-based HUD: speed, laps, position
Modular track system with texture packs
No build tools — raw HTML/JS

Technologies

Three.jsGame3DRacingFuturistic

© 2026 Jonathan Leahy · v1.0.9