Real-time 3D preview
Customers turn the product and swap parts, colours and text with Three.js and react-three-fiber.
Kastomiko / 3D product configurator development
Three.js and WebGL
3D product configurator that holds up on phones
A 3D configurator looks great on a developer’s laptop. The hard part is the customer’s phone, where a browser tab can be killed without warning. We build 3D for that phone, because we have dealt with exactly this in our own shop.
What you get
What we build
Customer artwork on the model
Uploaded prints appear on the 3D product in the right place and at the right size.
Studio renders
The same models produce clean still images for approval, marketing or the catalogue.
Memory budgets
Texture size, effects and model quality adapt to what the device can afford.
2D fallback
If 3D cannot run, the customer still finishes the order on a lighter 2D view.
Model preparation
We prepare GLB models, reduce their weight and set up batch renders in Blender.
Separate from your shop
The configurator runs in its own frame, so the rest of the shop keeps its speed.
Crash monitoring
Recovered tab crashes are reported, so you see real problems on real devices.
The iPhone problem, solved in production
Our configurator once made iPhones show a "page crashed" message. This is what came out of fixing it.
- Device limits are decided by actual memory, not screen width. An iPad is as tight as a phone.
- When the system kills the tab, the configurator detects it and returns in safe mode for 30 minutes.
- Safe mode has three levels: a tighter budget, no post-processing, then full 2D.
- In 3D instructions, merging parts brings a 1,264-part model down to 43 draw calls.
3D or 2D?
3D is not always the right call, and we will say so.
- Choose 3D when shape, depth or every side affects the decision: figures, furniture, assembled sets, packaging.
- Choose 2D when the product is flat or printed on one side: posters, mugs, cards, stickers.
- Combine them by designing in light 2D and showing a 3D render at the end.
FAQ
Questions we often get
What do you need from us to start?
A list of products and options, and any 3D files you have. If you have no models, we can discuss how to get them.
Which 3D formats do you use?
GLB works best for the web. Other formats can usually be converted, with weight reduction as part of the work.
Will 3D slow down my shop?
Not if it stays separate from your shop pages. We run it in its own frame, so the rest of the shop keeps its speed.
Can it run inside Shopify?
Yes, as a section on its own page in your theme. See Shopify product customizers.
Do you do furniture, jewellery or other products?
Our production experience is with figures, sets and packaging. The 3D engineering carries over to other products, and we will tell you honestly what is new for us.
Next
Related services
Contact
What should we build for you?
A few lines are enough. We'll reply with what we can do and how we'd approach it.
Prefer email? work@kastomiko.com