Turning Closet Shopping Into a 3D Configuration Experience

A Strong Product Line With a Weak Online Conversion Path

Hi-Tech Closets had a well-developed product catalog, but the online purchase journey required customers to initiate a manual consultation before they could commit to a design. Browsing the site meant looking at static images of finished closets, with no way to see how a specific configuration would fit a given room. For a product that is inherently spatial, that gap cost conversions.
The client also needed to serve their internal design team. Consultants were building layouts by hand and communicating them to end customers through emails and calls. There was no shared format, no consistent presentation, and no efficient way to hand off a design so a buyer could review it independently. The project required solving both problems with a single embedded tool.

A React and Three.js Configurator Built From the Ground Up

We built the configurator as a standalone React application embedded directly into the client's WordPress site. The 3D rendering engine runs on Three.js, generating a real-time interactive view of the closet that updates as the user adjusts dimensions, selects furniture towers, swaps materials, and places accessories. No page reloads, no approximations: every change is reflected immediately in both the 2D floor plan and the 3D view.
The room editor works in three modes: an overhead 2D floor plan for precise layout control, a 2D wall view for configuring individual walls, and a live 3D camera view for spatial inspection. In the floor plan, users can resize walls by dragging their edges, split wall segments to model L-shaped or irregular rooms, add and position doors (single, double, sliding, bi-fold), and enter exact dimensions by clicking any measurement label. In the 3D view, users can orbit the camera, toggle wall visibility to inspect the interior, and open all doors simultaneously to check clearance.

Furniture, Materials, and the B2B Sharing Flow

The furniture layer is built around configurable towers that snap to walls. Each tower supports multiple accessory slots, and finish selection (materials and hardware) applies per component in real time. All 3D models were created and optimized in Blender to balance visual fidelity with browser performance.
Account-based project saving lets authenticated users store and manage multiple designs over time. The B2B sharing feature encodes the full configuration state into a URL: a designer builds the layout, copies the link, and shares it with their client. The client opens the link and sees the exact configuration without needing an account. This single feature replaced the previous back-and-forth consultation workflow with a direct, reviewable handoff.

A Live Configurator and a New Sales Channel

Any visitor can start a new project in seconds by selecting a preset space type and adjusting it to their room. Every parameter is editable: wall lengths, room height, door types, ceiling treatment, furniture arrangement, and surface finishes. The tool saves state automatically and resumes exactly where the user left off.
The designer sharing flow changed how the internal team handles consultations. Instead of describing a configuration verbally or attaching screenshots to an email, a designer builds the layout in the configurator and sends a single link. The client receives an interactive 3D model of their specific closet, ready to review and request. What previously required a back-and-forth exchange now takes one step.
The project was delivered across four milestones plus additional tasks, and closed with the highest Clutch rating Todor.3D has received from any client. The team's ability to learn and adapt to the specifics of the client's product design was cited directly in the client review.