Outdoor Kitchen Configurator
A modular 3D configurator for outdoor kitchens: compose modules inside a custom-sized space, switch finishes in real time, save the project and export it as a PDF.
For a manufacturer of modular outdoor kitchens I developed the 3D configurator that lets customers design their own kitchen module by module. The space is generated from the room parameters (wall width, height and depth), modules snap to dedicated anchor points and every component can be customised with real-time PBR materials. Configurations are persisted on the backend, so they can be reopened and edited later, and the final composition can be exported as a PDF.
- Year
- 2025
- Area
- 3D Configurators
- Stack
- react three fiber, three.js, react, laravel, inertia, pbr
Client project under NDA — names and visuals anonymised.
Real-time Material Switching
Each module exposes its own material slots (structure, worktop, …) with swatches loaded from the catalogue. Changes are applied instantly to the PBR materials in the scene, and an "apply to all" toggle propagates a finish to every compatible module in a single click.
Modular Snap System
Free "+" anchor points are computed around the current layout: picking one adds a module that snaps into place next to the others or as a free-standing island, and the anchors update as the kitchen grows.
Live Dimension Overlay
Selecting a module shows its bounding box with live width, depth and height labels in centimetres, so customers can check the real footprint of the kitchen while they design it.
Parametric Room & Camera
The room is generated from parameters such as wall width, height and depth, and lit with an HDR environment and PBR wall and floor textures. An orbit camera lets users inspect the composition from every side.
Save, Reload & PDF Export
Configurations are saved to the backend and can be reopened later to keep editing. The final composition, with its modules and finishes, can be exported as a PDF to share it or request a quote.
All projects · Next project: Modular Kitchen Configurator