Hubit
The interactive 3D layer of Hubit on the web. I wrote the scene with Three.js and designed the interface around it, so every control in the 3D view has a flat equivalent and the camera moves only when the user asks it to.
- Frontend developer and UI designer
- JavaScript
- Three.js
- 2025
- The scene runs on a mid range laptop too: that is the hardware I measured frame cost on.
What I did
At Divizyon I built the interactive 3D layer of Hubit with Three.js 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.
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.