A Real-Time 3D Configurator for Custom Patio Covers

Configuring a Custom Cover Took a Salesperson and a Spreadsheet

A Thermogreen patio cover is a genuinely complex product. Modules come in glass-roof and louver-roof types, sized to the millimeter, with more than twenty colors and textures and a range of side accessories — ZIP screens, glass sliding walls, LED strips — that can go on any side. Every combination changes the price.

Before the configurator, all of that lived in the heads of sales staff. A customer who wanted a quote had to wait for someone to manually configure the product, look up pricing, and prepare an offer. It was slow, easy to get wrong, and it capped how many leads the company could handle. There was no way for a buyer to explore the product themselves, and no path to selling online or through partners.

Designing a Cover in the Browser, in Real Time

We designed and built the configurator's full front-end and its real-time 3D experience using React and Three.js. Customers start from predefined cover modules and expand their design by snapping additional modules onto existing sides, resizing each within the manufacturer's real min/max limits, with height handled globally across the whole structure. Accessories attach to any side of any module, with dimensions auto-calculated from the available gap, and colors and textures apply across the design.

Getting the interaction right was the hard part. The 3D scene is backed by a full state model with undo/redo and scene history, so customers can experiment freely and step back. The viewer renders smoothly in WebGL, supports a true full-screen mode, and generates both top-down and perspective snapshots of the finished design. Throughout, the goal was to make a complex, rule-bound manufacturing product feel like a simple, visual, forgiving design tool that anyone can use.

Live Pricing and Quote Submission

A configurator only sells if the price is real. As the customer changes dimensions or accessories, the configurator requests updated pricing from Thermogreen's ERP and shows it live, with a loading state while it calculates, so the number on screen always reflects the real manufacturing cost. On submission, the system assembles a bill of materials of every module and accessory with positions and dimensions, attaches the 3D snapshots, and passes the lead into Thermogreen's sales systems, while customers can register, save configurations, and return later, and staff review and finalize each quote. Automated emails confirm sign-up, password resets, and submissions.

From Launch to Continuous Evolution

The configurator went live in production in 2023 and has been actively developed ever since — a multi-year partnership rather than a one-off build. Over time we expanded the product catalog and accessory logic, refined the 3D lighting and color accuracy so on-screen materials match the real product, and added options to show or hide structural elements like the floor, supports, and walls so customers can drop their cover onto their own background images.

The configurator also evolved with Thermogreen's sales stack. We rolled out a full rebranding across the tool, and reworked the quoting flow so that, instead of firing off emails, a salesperson reviews a configuration in an expert mode and pushes it into the company's CRM, where a quote is generated automatically. That ongoing relationship — adapting the configurator as the client's business and systems change — is what keeps it at the center of how Thermogreen sells.