Real-time 3D
Configurator inside WordPress
Per-product
Only the options each product ships
5
Live options per product
Threedium
3D engine (formerly Unlimited3D)
Client snapshot
A US manufacturer of windows and doors, around ten window models and three or four doors, each offered in different materials and finishes. One window ships in both PVC and aluminum, another in aluminum only, and the color sets vary from product to product. They wanted a site redesign and, on top of it, a way for customers to see and build the real product online instead of guessing from a flat photo.
What they wanted
A real 3D configurator on each product page. Pick a frame color, a frame material, an interior color, a glass tint, and a grid, and watch the window update live, with materials that actually look like PVC or brushed aluminum, not a flat swatch. And it had to respect reality: each product could only show the options it genuinely ships with, and the team had to be able to manage all of it from WordPress without a developer.
How we built it
This was a real cross-discipline build, part development, part 3D, part project logistics. It ran on Threedium (Unlimited3D at the time), a real-time 3D engine, wired into WordPress:
- Model prep, the part that makes or breaks it. A 3D model does nothing on its own. We worked with the client's modeler to define a strict grouping convention on every window and door: the outer frame, the inner frame, the frame surfaces that change color, and the glass, each separated into its own named group. Only then can the Threedium API reach in and swap a material or a color on the right part. Getting the modeler to build to that convention was half the job
- Material authoring in Threedium. We built the materials by hand: how PVC catches light versus aluminum, how much reflection each has, the exact colors, the shadows. A white PVC frame reads as white PVC, not a painted-on tint
- Per-product option logic in WooCommerce. Every product exposes only the materials and colors it actually comes in. PVC and aluminum on one window, aluminum only on the next, with its own color set. All of it configured in WordPress, per product, no code
- The live loop. The configurator reads a product's option set from WooCommerce and calls the Threedium API to update the model on screen as the shopper clicks, in real time
Our designer worked inside Threedium alongside the build, tuning colors, shadows, and reflections so the rendered product looked like the real thing rather than a demo.
The outcome
Shoppers configure a window or door in real 3D and see accurate materials and colors for that specific product, and the manufacturer runs the whole option system from WordPress. No developer in the loop for day-to-day changes.
A real-time 3D engine, a WebGL model pipeline, and WooCommerce option logic in one system is a genuinely hard thing to get right, and to keep manageable for the people running it every day.
Metric
Before
After
Product visualization
Flat photos
Real-time 3D, built live by the shopper
Options shown
Generic, same for all
Only what each product ships with
Materials
A flat color swatch
True PVC and aluminum, authored in Threedium
Who manages it
Developer-dependent
The client's team, from WordPress
Tech and tools
WordPress
WooCommerce
Threedium (formerly Unlimited3D)
Threedium API
Real-time 3D / WebGL
Custom JavaScript
Services used on this project
More case studies
Related projects.
Professional Services & B2B
