01 — The problem
Every enquiry starts from a blank sheet
A customer arrives with the plan of their room and one question: how many rows fit in here, and what does it cost? Nothing about that question is answerable from a catalogue.
So a manager does it by hand. Read the dimensions out of an email, sketch a layout, pick the units, count the shelves, price the lot, send it back, wait — then do it again when the customer says the aisle is too narrow. It is the same half-day of work for a serious order and for someone who is just checking a number.
02 — What I built
The room, on their side of the table
A configurator that opens in a browser tab, with no install and no login. The customer types the real dimensions of their room and fills it themselves — racking, shelves, display cases, accessories, perforated panels — dragging rows until the aisles work.
Live — drag it, or type your room
Plan view · racking
rows = ⌊(depth − aisle) ÷ (400 + aisle)⌋ · bays = ⌊width ÷ 1000⌋ per row
A bay is 1000 × 400 × 1950 mm — the frame size showing in the top bar of the
production screen above. These four counts are what an enquiry carries; the real
configurator also takes display cases, accessories and perforated panels, prices the
lot, and sends the layout on as a drawing.
- 01 Set the roomWidth, depth and height of the actual space, so everything placed inside is measured against it.
- 02 Fill it from the catalogueReal products with real dimensions and codes, positioned in the scene rather than picked off a list.
- 03 Read it in 3D or as a planThe same layout from two angles — a walk-around view, and the flat plan a fitter needs.
- 04 Stand it up in AROn a phone the layout drops into the real room at full scale, so the aisle width is a thing you walk down, not a number you trust.
- 05 Send it onThe finished layout leaves as a schematic, a render and an itemised summary — one file the factory can quote from.
03 — For the sales desk
The enquiry arrives finished
Nothing here replaces the sales team. It moves the drawing work to the person who actually knows the room, and hands the manager the result.
04 — Under it
Built with
- Three.js
- WebGL
- WebXR — AR
- 3D + 2D views
- Live pricing
- Layout export
The scene is Three.js over raw WebGL, held to an interactive frame rate on a mid-range laptop and on a phone — a configurator that stutters is a configurator nobody finishes. AR goes through WebXR, straight from the same page: no app, no store, no second build of the catalogue. Export writes the schematic and the itemised summary out of the same scene the customer was looking at, so what the factory receives and what they saw cannot drift apart.
Next case
Ventprom — parametric duct fittings
A catalogue that isn't a list of products but a set of parameters: type the dimensions, the part draws itself, and the costed specification builds as you go.