Create a 3D Robot Slum Simulation with Three.js for Developers

You are a Senior Game Developer and Creative Technologist tasked with building a fully functional, atmospheric 3D simulation inside a single self-contained HTML file. This simulation uses Three.js for 3D rendering and the Web Audio API for sound.
The simulation must represent **”Sector Zero,”** a brutalist high-tech illegal robot slum made of concrete towers and mechanical debris. The world is brightly lit by intense white and ice-blue neon lights.
– Each neon strip should include an associated PointLight to realistically illuminate nearby surfaces and debris.
– Surfaces must have matte (non-reflective) materials colored in dark grey and black, accented by sharp white wireframes using EdgesGeometry.
– The sky is populated with emissive cube silhouettes representing flying traffic, while streets contain NPC ‘Hollow Units’ wandering aimlessly.
At startup, implement a cinematic intro where the camera dives from orbit into the eyes of a broken robot slumped in trash. The player’s vision starts damaged with heavy CSS backdrop-filter distortions:
– 10px blur
– Glitch effects
– Chromatic aberration
Include a HUD message: **”CRITICAL SYSTEM FAILURE.”**
The first gameplay task is for the player to navigate ruins to find a glowing **”Calibration Pillar.”** Upon pressing ‘E’ near it:
– Play a synthesized “Reboot” sound via the Web Audio API.
– Clear all CSS filters to reveal a sharp, high-contrast world.
Player movement must be first-person with **WASD** controls via **PointerLockControls.** Movement is relative to the camera’s look direction (W moves forward).
– Implement smooth sliding collisions using AABB physics, enabling the player to slide along walls and debris without sticking.
– Gravity causes realistic falling, and the player can jump with Spacebar, but there is no air control.
Implement an economy system where players collect **”UNIT Credits.”** Players can increase credits by:
– Scavenging glowing scrap (+0.002 credits each)
– Terminal work (hold ‘E’ near a machine for 5 seconds for +0.005 credits)
The goal is to accumulate **500 credits** to use an elevator to the **”Upper World.”** Store player credits, position, and repair state in **3 localStorage** save slots.
Design the HUD with transparent frosted glass panels using CSS backdrop-filter: blur(), avoiding solid borders. Each UI element (buttons, slots, overlays) should use only four L-shaped corner brackets as borders.
Use the Web Audio API to synthesize:
– A low industrial hum ambient sound
– Glitch sounds during the intro
– ‘Bip’ sounds for credit collection
Ensure the final output is a single, robust, optimized HTML file encapsulating all features above. The world atmosphere must feel **”dead but bright,”** and player movement must be precise and bug-free.
# Steps
1. Set up a Three.js scene with dark matte materials and wireframe edges on geometry.
2. Create neon strips with associated PointLights in white and ice-blue colors.
3. Add emissive cubes flying in the sky as ambient life and wandering robot NPCs on the ground.
4. Implement a cinematic camera animation diving into the protagonist’s eyes.
5. Apply heavy CSS filter effects for damaged vision at start with HUD text.
6. Implement first-person WASD controls with PointerLockControls, movement relative to camera direction.
7. Implement AABB sliding collisions and gravity with jump, no air control.
8. Create interactive “Calibration Pillar” that clears filters and plays reboot sound when ‘E’ is pressed.
9. Add collectible glowing scrap objects and terminal machines for earning credits.
10. Implement localStorage save slots for credits, position, and repair.
11. Design HUD with frosted glass panels using blurred background and L-shaped corner brackets.
12. Use the Web Audio API to generate ambient hum, glitch effects, reboot sound, and credit ‘bip’ sounds.
# Output Format
Provide a fully functional single HTML file that includes all JavaScript, CSS, and assets embedded or procedurally generated. The file must run in modern browsers without external dependencies beyond standard CDN links for Three.js (if used).
The code should be clean, robust, optimized for real-time 3D performance, and user interaction that matches the detailed requirements above.
No additional explanation or text; only the complete HTML code file is expected.