Cabinet Door 3D Configurator

From factory floor to browser: a real-time 3D model builder, trade portal and quoting workflow for a Canadian manufacturer — discovery, photography, 3D modelling, design, build, launch and upkeep, one team end to end

Real-time 3D configurator for aluminum cabinet-door frames — 4 series, 11 finishes — with trade portal and quoting, delivered end to end from factory to launch.

The Challenge

The company designs and manufactures aluminum frames for cabinet doors — the slim metal-and-glass doors used in high-end kitchens, wardrobes and commercial fit-outs — in four profile series, each in eleven anodized or brushed finishes, with glass or panel inserts, optional integrated handles in several lengths, and hinge options. Made in Canada, sold mainly through kitchen designers, cabinet dealers, architects and contractors.

The product is beautiful and nearly impossible to explain on paper. A customer weighing a brass-gold JZ frame with reeded glass against a matte-black curved frame with tinted grey glass had a flat swatch and a spec sheet to go on. Every quote began with a chain of emails establishing which series, which finish code, which insert, which handle and length — and the sales team spent hours a week re-explaining combinations that one picture would have settled.

There were also rules only the factory knew: which handle lengths exist for which series, that the curved series takes no handle at all, that a divider bar is offered only in matte black. None of that lived anywhere a customer could see it, so a good proportion of enquiries asked for combinations that could not be made.

The owner's brief was direct: customers should be able to build the door they want, see it, and send a quote request that already contains everything the factory needs — and the trade professionals who actually specify the product should have their own place on the site. That is not a web design job. It is product capture, 3D modelling, rules, software and process, ending in a website — and the owner wanted one accountable partner for all of it.

Our Approach

Discovery and requirements. Structured sessions with the owner and the sales team, then with trade customers, to map how a door is really specified: what the customer decides, what the factory decides for them, where quotes go wrong, and what a designer needs that a homeowner does not. Out of that came the option model — frame series, finish, insert category and type, handle type and length, divider, hinge — and, just as important, the factory rules that had to be encoded so the configurator could never offer a door that cannot be built.

Design first, as full pages. Before a line of production code, every page was designed as a complete mockup — home, about, model builder, for professionals, downloads, gallery, contact — and reviewed with the client. A separate lightweight prototype was built to test the visual direction and the photography treatment, then retired once the direction was agreed. Reviewing finished pages rather than wireframes meant the owner signed off on what customers would actually see.

Site visits, photography and sample capture. Time at the factory and showroom to measure the extruded profiles of each series, watch frames being cut, joined and finished, and photograph assembled doors and installed projects. Several hundred photographs were captured and processed across the project, feeding the gallery and the design, with new gallery batches added after launch as installations were completed.

3D modelling and materials. Each series was modelled from the measured profiles so corner joints, frame depth and handle integration are dimensionally right, and each finish was built as a physically based material — base colour, normal and roughness maps — so brushed brass, chrome, graphite and matte black respond to light the way the physical samples do. Every model was checked in a standalone glTF viewer before it went anywhere near the site. The finished library is 71 models: 42 frame variants covering the four series across eleven finishes (with separate integrated-handle variants), 12 handle models, 15 inserts and 2 divider bars.

Inserts got the same care as frames. Ten glass and panel options — reeded half-inch glass, ultra-clear, regular, frosted, tinted dark and light brown, tinted grey, tinted mirror in brown and grey, and a fluted MDF panel for custom-coloured doors — each with its own transmission, thickness and roughness so tinted glass darkens the frame behind it and reeded glass ripples the light. Glass is the hardest thing to render convincingly in a browser, and two of the later commits in the project history are exactly that: fixing a reflection artefact that appeared while rotating, and getting the grey tint right.

Technical build. A Next.js application in TypeScript, with the configurator rendered in real time by three.js on WebGL: orbit controls with damping, a hemisphere-plus-directional lighting rig with shadows, sRGB colour management, and models and textures cached so switching finishes is instant after the first load. Because customers click faster than models download, every selection carries a token and stale loads are discarded — a small detail that stops the frame and glass from ever showing a mismatched combination. The camera re-frames itself to each series' bounding box, so a narrow KB and a deep curved frame both fill the view.

Assets are served from S3 rather than the app's own bundle, which keeps deployments small and lets models be updated without a release; the origin is configurable so a CDN or staging bucket can be swapped in. The site ships with dark and light themes, responsive layouts tuned on phones, page-level SEO titles and descriptions, and legal pages.

The quoting workflow. Request a Quote builds a plain-language summary of the configuration — series, finish code, insert, handle and length, divider — and carries it straight into the contact form, so the message that lands with sales already reads like a specification. A separate trade-program application captures company, business type and contact details for architects, designers, dealers and contractors, and the downloads library holds the order form, product catalogue, technical specifications and warranty.

Project management and communication. One project lead, a standing meeting with the owner, staged sign-offs — option model, page designs, first interactive prototype, model library, full site — and a running change log. The commit history shows the shape of it: an initial model-selector in the first week, test models replaced by production models, the CK series added and repositioned, all models regenerated twice as finishes were tuned, handle sizing corrected, the trade form and dimension guidance added, then a style revision, theme and header fixes and SEO after launch. Problems surfaced in review were fixed in days, not discovered by customers.

Launch and maintenance. The site went live and has been maintained since: gallery additions, image and style refinements, the glass rendering fixes, and, months later, the migration of all models and images to object storage. A manufacturer's catalogue is not static, and a configurator that lags the catalogue is worse than none — so the relationship did not end at launch.

The Results

Customers now build the exact door they want — series, finish, insert, handle — and see it as a photoreal, rotatable 3D model that behaves like the physical product, then send a quote request that already contains the full specification. The email back-and-forth that used to precede every quote is gone from the front of the process, and the factory's own rules are enforced before a request is ever sent.

The trade audience has its own home: a professionals page with a trade-program application, and a downloads library with the order form, catalogue, specifications and warranty — the material designers and dealers need without wading through homeowner marketing.

The owner has one accountable partner for the whole platform — from the 71-model 3D library and the photography to the code, hosting and quoting workflow — and a maintenance relationship that keeps the configurator matching the catalogue. New series, finishes and inserts drop into an existing pipeline rather than being built from scratch.

The distinction worth stating plainly: an AI can generate a handsome website in an afternoon. It cannot visit a factory, measure an extrusion, learn which handle lengths exist for which series, model eleven finishes so brass and graphite reflect light differently, notice that tinted glass looks wrong while rotating and fix it, or sit in the weekly meeting where those things get decided. That work is the product; the website is where it becomes visible.