RCWeb Spacewar 3D App

The RCWeb Spacewar 3D App (app/spacewar3d) represents the pinnacle of the Spacewar series, utilizing the Asymmetric Pattern. It completely revamps the engine into a hardware-accelerated 3D environment using Three.js, introducing complex wave-based progression, 3D model loading, and advanced lighting.

Icon

Screenshot

What it does

• Full 3D Environment: Transitions the flat 2D shooting arena into a deep 3D space with a fixed PerspectiveCamera, dynamic lighting, bloom post-processing, and interactive fog.
• Wave Progression System: Implements a structured 5-wave PvE (Player vs Environment) gauntlet. Players must clear the screen of increasingly difficult combinations of asteroids and distinct enemy classes (Hunter, Flanker, Sniper, Swarm) to progress.
• 3D Asset Loading: Ditches procedural vector generation for actual .fbx 3D model parsing for ships, enemies, and power-ups (rocket.fbx, Spaceship.fbx).
• Dynamic Materials: Adjusts the roughness and metalness of loaded models on the fly, applying physically based rendering (PBR) to make ships look like tangible metal reflecting procedural environment maps.

How it works

The engine in script.js wraps standard 2D arcade logic inside a 3D rendering pipeline to achieve its visuals without sacrificing responsive multiplayer code.

• Three.js Pipeline: Instantiates a WebGLRenderer capped at a pixel ratio of 1.0 to maximize framerate on 4K TVs. The game utilizes EffectComposer to apply a full-screen RenderPass to achieve a Reinhard tone mapping exposure curve.
• Model Parsing: Connects a THREE.FBXLoader to asynchronously fetch 3D geometry files. To handle variably sized artist files seamlessly, the loadModel function calculates the bounding box (new THREE.Box3()) of each asset and computes a perfect scale = targetSize / maxDim ratio ensuring fair gameplay hitboxes.
• Material Cloning: Since multiple players share the same "Spaceship" geometry, the setShipColor function manually clones and overrides the material (child.material.clone()) on the loaded hierarchy with unique THREE.Color HSL values mapped to the specific user's identity.
• Wave Factory: The WAVE_DEFS array strictly declares enemy compositions. The advanceWave orchestrator halts gameplay, spawns informational DOM banners, clears out all references and physically scene.remove(oldMesh) entities before spawning the next layout tier.

Launch RCWeb App