Modular Kitchen Configurator

A 3D kitchen configurator where worktops, side panels and cutouts are generated procedurally around the modules the customer composes.

For a manufacturer of stainless steel kitchens I developed the 3D configurator that lets customers compose base, tall and wall units inside their own room. Instead of relying on pre-modelled variants, most of the geometry is generated at runtime: the worktop is a procedural mesh built from the kitchen footprint, sink and hob holes are cut with boolean operations, and side panels are placed automatically only where a side is left exposed. Finishes are applied in real time with triplanar-mapped PBR materials, and the final configuration can be sent as a quote request.

Year

2026

Area

3D Configurators

Stack

react three fiber, three.js, react, laravel, inertia, csg, procedural geometry

Client project under NDA — names and visuals anonymised.

Procedural Worktop

The worktop is not a model attached to each module: it is a single mesh generated procedurally from the size and layout of the kitchen, so it runs seamlessly across adjacent units, follows L-shaped and peninsula layouts and updates whenever a module is added, removed or resized.

Runtime Boolean Cutouts

Sink and hob openings are carved into the worktop at runtime with boolean (CSG) operations. Width, length, corner radius and position of each cutout are editable from the panel and the geometry is recomputed live.

Triplanar Materials

Finishes for worktop, doors, plinth and side panels switch in real time. Textures use triplanar mapping, so brushed and patterned finishes keep a consistent scale and direction regardless of each module's position and rotation, with no UV seams between units.

Automatic Side Panels

Side panels are placed automatically to close every exposed side of the composition, for example the ends of a peninsula, while sides against a wall or another module are left open.

Modular Snap System

Free anchor points are computed around the current layout: choosing one previews the module in place and snaps it next to the others, with live dimension labels showing distances from the walls.

Wall Units

Besides base and tall units, customers can hang wall units at any height along the wall, with dedicated anchor points and height measurements from the base units below.

All projects · Next project: Galactify