Hubit
Hubit's interactive 3D layer on the web: I wrote the scene with Three.js, every control has a flat equivalent and the camera moves only when the user asks.
- Frontend developer and UI designer
- JavaScript
- Three.js
- 2025
- The scene reaches 120 FPS on a strong machine, but since frame cost varies with hardware I measured on a mid range laptop; it stays smooth there too.
What I did
At Divizyon I built the interactive 3D layer of Hubit with Three.js (WebGL) and designed the interface around it. The work split into two halves: pulling the scene out of demo territory so it reads as a user interface, and keeping it responsive along the way.
Why it was built this way
A 3D view earns its place only when it shows something a flat layout cannot. That constraint drove the design: every control had a plain counterpart, and the camera never moved in a way the user did not ask for, because once a scene starts moving on its own, people stop trusting it.
What I learned
Rendering performance on the web is mostly a budgeting problem. The frame cost is decided long before the render loop, in how many objects exist, how many materials they share and how much work happens per frame that could have happened once. Profiling on a mid range laptop instead of my own machine changed which optimizations were worth doing.
Share
The card this page shows when its link is shared.
- Share on X (opens in a new tab)
- Share on LinkedIn (opens in a new tab)
- Share on WhatsApp (opens in a new tab)
- Send by email
Is a system like this on your list?
Say what it has to do and when you need it. We can set the first step from there.