3D configurator
Custom build, 5 options per product
Per-product setup
Only available combinations are shown
Threedium
Integrated, 3D models update in real time
About the Client
The company sells windows and doors in Florida, US. Its product range includes around 10 window models and three to four doors, with different materials, finishes, and color combinations for each product. That means one window might be available in PVC and aluminum, while another is aluminum only, with different colors and finishes attached to each.
About Threedium
Threedium is a real-time 3D product configurator platform that lets you build interactive 3D product experiences for the web. Product models can be structured into changeable parts, with materials, colors, and other properties updated in real time as shoppers make their selections.
The Challenge
The client wanted a more modern website and to show their customers how their chosen combination would actually look before they make a purchase, so the project combined a site redesign with a product configurator on every product page.
A shopper could choose a frame color, frame material, interior color, glass tint, and grid, and then see the product change immediately in 3D.
The materials also had to look like the real materials. PVC needed to read as PVC. Brushed aluminum needed the right reflection and light response. A flat color swatch wasn’t enough.
The configurator also had to understand the product range. A window that only ships in aluminum shouldn’t show PVC as an option.
And the client’s team wanted to manage those options directly from WordPress, without relying on a developer.
Our Approach
The build combined WordPress development, WooCommerce, 3D modeling, and Threedium’s real-time 3D engine.
The 3D models
The configurator can only change the right part of a product if the model is structured correctly.
We worked with the client’s 3D modeler to define a naming and grouping convention for every window and door. The outer frame, inner frame, changeable frame surfaces, and glass were separated into named groups.
That structure lets the Threedium API target the correct part of the model and change its material or color.
Getting the models built to that convention was a major part of the project.
Materials in Threedium
We built the materials by hand inside Threedium.
That included the way PVC and aluminum reflect light, their surface response, exact colors, shadows, and reflections.
The goal was simple: to make a white PVC frame look like white PVC, not a white texture applied to a 3D model.
Per-product option logic
WooCommerce controls which options each product can show.
One window can offer PVC and aluminum with its own color set. Another can offer aluminum only with a different set of colors.
The client’s team manages these combinations from WordPress. No code is required for day-to-day product changes.
WooCommerce and 3D configurator
The configurator reads the selected product’s available options from WooCommerce.
When a shopper changes an option, the system calls the Threedium API and updates the 3D model on screen in real time.
Our designers worked inside Threedium alongside the development team, tuning materials, colors, shadows, and reflections against the real products.
The Outcome and Value
Shoppers can now see the exact window or door they’re considering, including its available materials, colors, glass, and grid, before they make a purchase decision. That gives the manufacturer a way to sell a configurable product online without relying on static photos or manual explanations for every combination.
The product rules are managed from WordPress, so the team can update what each model offers without depending on a developer every time a material, color, or finish changes.
The result is a product experience that does more than display the range. It helps shoppers understand what they can buy, removes guesswork from a high-consideration purchase, and gives the manufacturer a more scalable way to present and sell its product range online.
Before & After
Metric
Before
After
Product visualization
Flat photos
Real-time 3D configured by the shopper
Options shown
Generic options
Options that product ships with
Materials
Flat color swatches
PVC and aluminum authored in Threedium
Who manages it
Developer
The client, directly from WordPress
Tech and Tools
WordPress
WooCommerce
Threedium (formerly Unlimited3D)
Real-time 3D / WebGL
Custom JavaScript
Services Provided
- WordPress development
- WooCommerce development
- Custom plugin development
- Custom API development
- 3D modeling
- UX / UI design
More case studies
Explore related projects.
eCommerce & Retail
50% drop in sales after a migration fixed by recovering the redirects.
Want results like these for your business?
If your products have too many combinations for a flat product page, we can turn that logic into a WooCommerce configurator your team can manage with ease.
