Product experience
Cyberpunk Keyboard
A cyberpunk mechanical keyboard, modeled in Blender and rebuilt as a live, interactive Three.js product experience.
View Live →- ( Blender )
- ( Three.js )
- ( 3D )
The keyboard itself is fully modeled and textured in Blender — sculpted keycaps, individually placed switches and stabilizers, a manifold gasket derived from the real (non-flat) shell parting seam, and a purple RGB underglow — then exported through a Draco-compressed GLB pipeline into a real-time Three.js scene, not a pre-rendered image.
On the web, the model drives a chaptered product experience: a real-time exploded assembly view with a per-stage dossier, bidirectional lighting control (drag the on-page control and the 3D light rig turns, or vice versa), and a multi-mode material inspector (wireframe, roughness, reflection) sharing one scan-plane shader system. Still in active development — the Specs milestone is built and verified, and a final polish pass hasn't started yet.
Notable
- Bidirectional DOM ↔ 3D sync on the lighting control, verified in both directions.
- Exploded-assembly stage counts and dimension readouts are computed live off the model's own bounding box — never a hand-typed measurement.
- A defensive error boundary around the render loop: an uncaught exception in one chapter no longer takes down the whole scene.
Stack
- Three.js
- Blender
- TypeScript
- React
Want something like this?
Start a Project