Hi everyone — I built Neon Loft, a first-person cyberpunk room that you can explore directly in your browser. No installation or login is required.
Live demo:
https://cyberpunk-room.vercel.app
Source code (MIT):
The part I enjoyed building most is the view outside the window.
The city is not just a static background. It includes holographic advertising towers, flickering LED billboards, video advertisements projected across building walls, and trains moving along elevated rails. I wanted the outside world to feel active, even while the player remains inside a single room.
The room itself is also interactive. You can turn the mosaic lanterns on and off, switch channels on the CRT television, activate the wall projector, explore the wardrobe, and sit at a retro gaming desk.
One feature I wanted to try was making the room’s current state shareable. Your changes are saved in the URL, so when you copy and share the link, other people can open Neon Loft with the lights, television, projector, and other settings just as you left them.
The interface supports both English and Chinese.
Built with: Three.js r170, TypeScript, Vite, and postprocessing, without a frontend framework. The project uses WebGL2, includes WebXR support, and provides a LOW graphics preset for mobile and touch devices.
PBR textures come from Poly Haven under the CC0 license, while the mosaic artwork comes from The Met’s Open Access collection. All third-party assets, sources, and licenses are documented in THIRD_PARTY_ASSETS.md. Assets requiring attribution are also credited in the in-app credits panel.
My main goal was to see whether a relatively small browser-based environment could feel like an actual place rather than a static 3D showcase.
I would especially appreciate feedback on the atmosphere, how easy the interactive objects are to discover, and how the controls and performance feel on different devices.
I won’t spoil for anyone.