Pure Vibes Space

Project Story

About the project AST-3D (Pure Vibes) is a modernized, 3D reimagining of the classic arcade game Asteroids. The inspiration behind this project was to take a timeless, universally understood gameplay loop and elevate it with a rich, cinematic atmosphere. We wanted to focus on delivering "pure vibes"—combining a sleek, NASA-inspired heads-up display (HUD) with smooth, glowing neon visuals and responsive thruster mechanics.

How we built it The core of the game is built entirely from scratch using Vanilla JavaScript and Three.js to handle the 3D rendering context. We used a modular architecture without a heavy framework, utilizing standard HTML5 and CSS3 for the overlay UI to achieve a glassmorphism effect and tabular, highly readable telemetry data.

The game loop is heavily rooted in 3D physics and vector math. We designed advanced gameplay elements including:

Procedural Geometry: The asteroids and the moon aren't static models. We procedurally built them using IcosahedronGeometry, manipulating vertex colors and applying 3D dot-product math to carve out realistic-looking craters and surface noise.
Dynamic Lighting & Particles: The lasers utilize additive blending and multiple point lights to create a "hot" neon core with a brilliant flare. Thrust exhaust and explosion debris are handled by a custom 3D particle system.
Web Audio API Synthesizer: Instead of relying on static audio files, we used the browser's native Web Audio API (OscillatorNode and GainNode) to procedurally synthesize the retro "pew-pew" laser sounds and explosion effects in real-time.
GLTF Model Loading: The player's ship dynamically loads a custom .glb model, but safely falls back to a procedurally extruded 3D shape if the model fails to load.

Challenges we faced Tuning the physics in a 3D environment while simulating an endless looping 2D space was tricky. We had to calculate exact camera bounds based on the field-of-view (FOV) mapping to ensure the asteroids gracefully wrap around the screen.

Another subtle but complex challenge was implementing the Moon gravity mechanic. We had to formulate an inverse-square gravitational pull \( F = \frac{G \cdot m_1 \cdot m_2}{d^2} \) that constantly tugs on the player's ship velocity vectors when the moon passes by, dramatically shifting the gameplay dynamic without making it feel unfair. Maintaining high performance with thousands of twinkling background stars, dynamic lighting, and particle effects required strict memory management, taking care to recycle or smartly garbage collect removed meshes and materials.

What we learned We learned an immense amount about shader-style material configurations in Three.js (specifically emissive tuning and AdditiveBlending), managing complex states strictly through delta time (dt) for frame-independent physics, and blending raw DOM UI elements precisely over a WebGL canvas without input interference.