Three.js Interactive Night Flight Over an Infinite CityThree.js Interactive Night Flight Over an Infinite City
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami.
I built this project to test Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING: I focused on two core engineering benchmarks:
Precision implementation of infinite world under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE: Engineered directly in the browser with Three.js (GLB 3D), Canvas2D, Infinite world. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response. Everything executes in the browser using Three.js (GLB 3D), Canvas2D, Infinite world. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED: Balancing the mathematical rigors of infinite world with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters. Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF: The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Maisha's avatar
This is super fun and clean. Elite choice from 3D interaction down to the canvas.
Miraz's avatar
Top class web design
Samin's avatar
Thank you!😊
Senatix's avatar
Senatix Wellness logo
Brilliant use of three.js🧠
Samin's avatar
I am happy that you enjoyed it😊
Reene's avatar
Are those buildings moving infinitely?
Samin's avatar
Yes they are. It's looping but your browser remains fast due hardware-accelerated rendering. Check out the JSFiddle and inspect it live😊
Shanta Islam's avatar
I am stealing this.
Samin's avatar
You're more than welcome to Miss. This project is completely open-sourced for anyone to try😊
Dim's avatar
This is very nice
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started