Case study · Interactive 3D
Products you can turn, open and restyle in the browser. The showroom uses credited open-source models with colour and fabric options, a lamp that switches on and a door that opens. The ZA-1, my own instrument design, was built from its real CAD and comes apart on screen.
Why it exists
Photos can't show how a product opens, what's inside it or how it looks in another colour. A model people can turn and take apart can, and it works on the product page itself.
How it was made
01
A showroom on one canvas
Several products share one 3D scene, and each has its own trick: colour and fabric options, a lamp that switches on, a door that opens.
02
Credited open-source models
The showroom models come from open-source libraries. I checked each licence, compressed the files and resized their textures, and every one is listed on the credits page.
03
Real CAD to the web
The ZA-1, an instrument I designed, went from its CAD files to a light web model. As you scroll, its covers lift and its boards separate into a labelled exploded view.
04
Light on phones
Scenes only render while they're on screen, models are meshopt-compressed, and people who ask for reduced motion get a still frame.
Where it is now
Live in the catalog's 3D chapter and on the 3D products page.
Built with
- React Three Fiber
- drei
- glTF
- meshopt
Services it shows
Get a quote
Tell us what you'd like built and we'll send a written quote with a fixed price and a dated plan.