CADEMA s.r.o.·Tech × Sales

A real-time 3D configurator that turns "send us your dimensions" into an instant quote. into an instant quote.

React 18Three.jsReact Three FiberDreiZustandjsPDFhtml2canvaslive pricing engineViteTailwind

A web-based 3D configurator that lets a customer design a custom pergola or garden pavilion in real time — placing doors, windows, terraces, choosing materials, watching the price update live, and finally exporting a quote PDF or a shareable link.

Two synchronised views — a 2D SVG floor-plan and a Three.js scene — stay in lock-step on every change. The export pipeline captures the canvas, renders an HTML quote, converts to PDF and serialises the configuration into a URL. Sales tool that replaces the back-and-forth quoting cycle with an instant, customer-driven visualisation.

Hard parts. Keeping 2D and 3D in sync without flicker on every change — the trick is one upstream Zustand store, no derived state in the views. PDF layout that survives any configuration. Three.js performance budget on mid-range machines (instanced meshes for repeat geometry, capped device pixel ratio, disposed textures on unmount).