Most Three.js configurator demos stop at the visual. The customer rotates a nice model, picks a color, and that is the whole show. But the manufacturers I build for do not sell models. They sell a product with a price and a delivery date.
The question that closes a sale is not "does it look good". It is "what does THIS configuration cost, and when do I get it". That second half is the part nobody puts in a demo. Here is how I build it.
The configuration is the only thing that matters
The whole system hangs off one structured object: the config. Not the price, not the Three.js scene state. Just the choices the customer made.
const config = {
product: 'horizon',
width_mm: 4200,
height_mm: 2800,
panels: 6,
glass: 'frosted',
finish: 'anodized-black',
soundproofing: 'acoustic-42db',
track: 'top-hung',
}
Everything else is derived from this, server-side. The browser owns the preview. The server owns the truth. I wrote about why a client-side price is a 5-second DevTools hack in a separate post. The exact same principle applies to lead time: never let the page be the source of a number the customer acts on.
Price is a server-side function of config
Price is the easy half. Given a raw config, the backend recalculates from scratch and ignores whatever the frontend thinks:
function calculateFinalPrice(array $config): float {
$price = self::BASE_PRICE[$config['product']];
$price += self::GLASS_PRICING[$config['glass']] ?? 0;
$price += ($config['width_mm'] * $config['height_mm'] / 1_000_000) * self::PER_SQ_METER;
$price += self::SOUNDPROOFING[$config['soundproofing']] ?? 0;
return round($price, 2);
}
The frontend still shows a live estimate as the customer drags sliders, because that is good UX. It is just labeled an estimate, and it is never what gets charged.
Lead time is pricing's harder cousin
Price is mostly a lookup plus arithmetic. Lead time depends on moving parts:
- base production time per product line
- option surcharges (custom glass adds days, acoustic seals add more)
- stock components vs made-to-order
- the factory's current backlog
Model it as rules, server-side, the same way as price:
function leadTimeDays(array $config, Capacity $cap): int {
$days = self::BASE_LEAD[$config['product']];
if ($config['glass'] === 'custom') $days += 10;
if (str_starts_with($config['soundproofing'], 'acoustic')) $days += 5;
// queue pressure from live capacity, not a hardcoded guess
$days += $cap->currentBacklogDays();
return $days;
}
That currentBacklogDays() is what makes the number real. A hardcoded "4 to 6 weeks" becomes a lie the moment the factory is busy. If the manufacturer can feed you a backlog figure, even a weekly spreadsheet export or a single field in an admin panel, the lead time stops being marketing and becomes a commitment the customer can plan around.
The output is a quote, not a number
The customer configured something real. Give them something to act on:
- the price (server-calculated)
- the lead time (server-calculated)
- a snapshot of their exact configuration: the 3D view rendered to an image, plus the spec list
- a reference id, so sales and the customer talk about the same thing
That is a quote. Generate it as a PDF or an order record, email it, and the configurator just did a salesperson's first hour of work before anyone picked up the phone.
This is the 80% nobody demos
The visual is 2 to 3 weeks of work. The quote engine (pricing rules, lead-time rules, a capacity input, PDF or order generation, and an admin UI for the manufacturer to maintain all of it) is the larger half. It is also the half that turns a toy into a tool. When I quote a configurator project, I price the engine, not the screens.
Live configurators if you want to see the visual foundation this sits on:
- pergola3d.grodev.pl - bioclimatic pergola, instanced louvres
- basen3d.grodev.pl - pool configurator with Draco and PWA
I am Dominik Groński / GroDev, a studio in Poznan, Poland building custom 3D configurators and Laravel back-ends for manufacturers. If you are putting a price and a lead time behind a configurator, that back half is the part I work on.
