Verandaci

Verandaci sells custom verandas, canopies, and glass sliding walls, made to measure for each customer's home. They wanted people to be able to see and compare their options (dimensions, roof material, colors, wall types) in 3D before requesting a quote, instead of picking from photos or a flat spec list. The tool had to run inside an iframe embedded on their existing product page and stay fully interactive there, for homeowners browsing the site directly.

I started with a base 3D model in Blender and optimized it so it could be resized dynamically without breaking, then brought it into the PlayCanvas editor. From there I built the logic that takes the values a customer picks on the website (width, depth, color, roof material, wall type, gutter style) and grows and reassembles the model in real time to match: repositioning and rescaling structural parts, cloning and spacing repeating elements like purlins and side panels, and swapping in the right materials and textures for each option. I worked solo end to end, from the 3D asset work to the configurator logic.

An embeddable PlayCanvas configurator that assembles a full veranda in real time as the customer changes its size and materials, sitting inside an iframe on Verandaci's product page. It talks to the host page over the browser's postMessage API: the website sends configuration changes in, the configurator rebuilds the model to match, and the customer's final setup feeds into a quote request.

It ran on verandaci.nl for a while and was viewed 28,000+ times, based on the project's PlayCanvas analytics. The site has since moved to a different configurator tool, so this version isn't live anymore. It was the first project where I built two-way communication between an iframe and its parent page, and it pushed me to make the 3D model as dynamic as possible while recreating Verandaci's real materials inside PlayCanvas.