Skip to content
← All posts

Building 3D product configurators that actually convert

3 min read#threejs#react#ecommerce

What I learned shipping a house, a plank and a staircase configurator: where state lives, how the camera moves, and what happens after the customer clicks the button.

I've built three 3D configurators for clients: a house builder with twelve models, a personalised plank shop with Stripe checkout, and a parametric staircase with quote requests. The 3D is the part people notice. The decisions that decide whether the thing earns money are mostly elsewhere.

One source of truth for the configuration

Every option the customer picks (facade, roof, floor, font, width) goes into a single store, and both the 3D scene and the side panel read from it. I use Zustand for this.

const useConfig = create<Config>((set) => ({
  facade: "wood",
  roof: "tile",
  setOption: (key, value) => set({ [key]: value }),
}));

The panel never talks to the scene and the scene never talks to the panel. That makes the finished configuration a plain object, and a plain object is what you need for the order summary, the quote request and the lead email.

Many panels, one pattern

The house configurator has sixteen panels. That would be unmanageable if each were bespoke, so every panel is the same component fed with a list of options, and each option maps to a material or a model variant. Adding a seventeenth means adding data, not code.

Move the camera, don't teleport it

When someone switches from the kitchen to the bathroom, the camera should travel. GSAP tweens the camera position and target between saved viewpoints, which makes rooms feel connected and gives the customer a moment to see that their choices carried over.

The conversion step decides everything

This is the part clients care about, and it differs per product:

  • House: a lead-capture form that sends the customer's details with the full configuration to the client's backend through a Next.js API route. The purchase is too big to happen online, so the goal is a qualified lead.
  • Plank: Stripe Checkout, with reCAPTCHA verified before an order is created and every order appended to a Google Sheet that the fulfilment team already used.
  • Staircase: a summary of the chosen dimensions and a quote request.

In all three, a snapshot of the design travels with the order (I used html2canvas for the plank), so the person making the product sees exactly what the customer saw.

What I'd tell the next team

  1. Model the configuration as data first and draw it second.
  2. Keep the option list in one place so design changes don't need a developer.
  3. Decide what happens after "Done" before you build the first panel.
  4. Test on a mid-range phone early. Most configurator traffic is on one. I wrote about how this site handles it.