8 Images
Drag it.
The redesign
The viewer had to survive a page I would never see
Three constraints shaped every other decision, and not one of them is about rendering. Each is a load the interface had to carry.
Problem
A file the web cannot open
A furniture merchant has two things that do not fit together: a 3D model built for a rendering package, and a product page built for photographs. The model is heavy - the demo firetruck alone is a megabyte of mesh before a single texture loads - and it arrives as an undifferentiated lump of geometry with no idea which triangles are the seat and which are the legs.
Between those two things there was nothing. Not a rendering problem: a naming problem, a reduction problem, and a fitting problem. The rest of this page is those three.
I built a 3D editor out of 2D habits
3D software presents geometry as a scene graph. Graphics tools present it as a stack of layers, and almost everyone in this market has used one of those.
So meshes are layers. Selecting, reordering and renaming work the way they do in an image editor, and the merchant never learns a new mental model to do the one job they came for.
The same borrowing, one level down. A path is a group, because that is the word the audience already has for it.
Consistency here is not tidiness. It is what lets someone who has only ever grouped objects in Figma do the equivalent thing to a mesh without being taught.
Docked panels eat the canvas, and the canvas is the product. So the panels float, the way Figma's do, and the model keeps the room.
It also rehearses the real constraint: if the interface can give up its own space on a desktop, it can survive being squeezed into a merchant's page later.
A shopper cannot choose a material for a mesh. They choose one for the seat, the legs, the top.
So grouping meshes into named parts is not a modelling step, it is the step that makes the product shoppable. Chair back, chair base, chair seat, chair cushions, table top, table legs, vase - seven names, and the configurator writes itself.
The material editor
Maps are a stack, not a form.
Switch a map on and the render answers. This is the screen I argued for and won.
Normal map
Roughness
Emission
Playing itself — touch anything to take over
The file itself
An arbitrary mesh, and the names that make it shoppable
This is the real thing - toy-firetruck.glb, exactly as the product serves it: Draco-compressed, 1,066 KB, straight out of Blender. The list beside it is not typed into this page. It is read back out of the file at runtime, which is why it says what it says.
Ten named meshes arrived with the model. Click one and the rest fall away. That is the entire argument of the product in one gesture: geometry is not shoppable, but Ladder Turret is.
Parts
10 of 10Whole. Take a part off if you like.
The loop
From a lump of geometry to something a shopper can point at
Four moves. Each one exists because of the load named above it.
- 01
Upload the model
The merchant brings whatever their maker exported. Nothing is renamed, nothing is optimised by hand - the model arrives as it is, and the work of making it legible happens here rather than in a 3D package the merchant does not own.
- 02
Name the parts
Meshes are grouped into parts, and the parts get the words a shopper would use. This is the whole trick: after it, every other screen has something to talk about. Seven names on this product is what turns a mesh into a configurator.
- 03
Attach the materials
Materials are built in their own editor - imported, or made from layers - and attached per part. One chair seat carries 127 of them, paged sixteen at a time, which is only usable because the library is already cut into thirteen sets.
- 04
Fit it to a page you will never see
Desktop, tablet, phone, and a custom size the merchant drags to, with the pixel dimensions live while they drag. The viewer reflows and the chrome stays. This is the step the first version got wrong.
The fail
I designed for three screen sizes. Merchants have infinite.
The first version of the embed offered desktop, tablet and phone. Three breakpoints, the way a website is built, and it looked correct in every review because reviews happen at the sizes you designed for.
Then it went into a real page. A merchant's product column is not 1440, or 768, or 393. It is whatever is left after their header, their gallery and their sidebar have taken what they need - and at those in-between widths the viewer was wrong in the way only fixed breakpoints can be: a menu that overlapped the model, a thumbnail strip that clipped, controls that had nowhere to go.
The fix was to stop treating size as a set of cases and start treating it as a range. A custom size with a drag handle and a live pixel readout, and chrome that is laid out against the container rather than against a breakpoint. It is the least glamorous decision in the project and the one that made the product embeddable.
A small thing that was not small
Models became Products, Showrooms became Scenes
The navigation shipped with different words than the ones it was designed with. Research moved them: Models and Showrooms are what the people who build 3D call these things, and they quietly told everyone else that the tool was not for them.
Products and Scenes are what a merchant calls them. Renaming a primary navigation item late is expensive and worth it - it is the cheapest possible way to widen who thinks a tool is meant for them.
Designed, not shipped
Scenes is still a waiting room
The third module - putting several products into one room and rendering the set - is designed and not live. Open it in the product today and you get a sentence and a request-early-access link.
That empty state is the part I would defend. A module that does not exist yet still has a state, and the honest one tells you what it will do and offers you a way to be told when it does, rather than hiding the navigation item and pretending the ambition is not there.
Reflection
The 3D was the easy part
Two and a half years on this, and almost none of the work that mattered was about geometry. It was about naming: parts so a shopper can point, sets so a catalogue of two thousand textiles can be chosen from, panels and layers borrowed from tools people already knew so that nobody had to be taught.
The decision I would defend in any review is the boring one - laying the viewer out against its container instead of against three breakpoints. It is invisible when it works, and it is the only reason the thing can live on a page I will never see.