This project is an interactive 3D kitchen showroom built for an interior design and joinery company. It allows users to explore a virtual kitchen, customize materials and finishes in real time, and visualize their design choices before placing an order.
Features
Full 3D kitchen model designed by our modeling team.
Configurable materials — users can select cabinet styles, change upper and lower cabinet colors independently, and choose between matte or high-gloss finishes.
Customizable elements — countertops, islands, flooring, and backsplash materials can all be changed separately.
Realistic lighting & reflections — combines baked and dynamic lights for accurate shading and reflections.
Accurate dimensioning — measurements are calculated in real-world units for cost estimation and layout accuracy.
Walk-through mode — users can navigate the showroom freely with mouse or touch controls, simulating a real-life visit.
Technologies
Three.js – 3D rendering, lighting, and material system
GSAP –Camera animations
React.js – frontend framework and UI management
Blender / 3ds Max – 3D modeling and light baking
Figma – UI/UX design and prototyping
My Role
Three.js Developer: implemented model loading, material coordination, lighting setup (baked + dynamic), and real-time configurator logic.
Project Manager: coordinated between 3D artists, designers, and frontend developers to ensure a smooth production pipeline and visual consistency.
Technical Notes
The showroom uses GLTF models with baked lightmaps for static geometry, combined with dynamic lighting for reflections and highlights. All materials are physically-based (PBR) for realistic rendering. Texture management, optimized loading, and scene updates were implemented in Three.js with a strong focus on maintaining high performance on both desktop and mobile.
I saw the post and think there is a great opportunity to implement a Camera Matching pipeline using f.SPY. We could extract the exact camera intrinsics from the user’s photo to ensure the 3D assets align seamlessly with the real-world perspective.
Furthermore, I suggest moving away from static models in favor of procedural cabinetry. By building a parametric system, we can allow users to adjust dimensions and configurations in real-time, regenerating the geometry on the fly. This approach not only provides a superior UX but also optimizes performance by handling data-driven meshes rather than loading multiple heavy assets
Can you explain the technical approach in Three.js for implementing such a project? For the procedural part that generates dynamically — what components or techniques should be used? Also, I didn’t fully understand the part about the photo and blending it with the 3D model. Could you explain more precisely? I liked the idea.
The orbit navigation mode was the most interesting part for me in this experience. Did you use threejs OrbitControls with its native limitations, or was it a custom-made solution?
I imagine creating an immersive tool where any user can use a photo or a quick scan of their kitchen via f.spy or Gaussian Splatting, and right there, start designing their own custom cabinetry proposal.
Instead of just looking at static options, they can interact with procedural cabinets that dynamically grow, shrink, or change configuration based on their real-world space. Then, that custom modification persists as a completely new, unique asset in the system.
three.js its the enteri ecosistem where the evrethin hapenst the “escene”
Full 3D kitchen model designed by our modeling team.
Configurable materials — users can select cabinet styles, change upper and lower cabinet colors independently, and choose between matte or high-gloss finishes.
Customizable elements — countertops, islands, flooring, and backsplash materials can all be changed separately.
Realistic lighting & reflections — combines baked and dynamic lights for accurate shading and reflections.
Accurate dimensioning — measurements are calculated in real-world units for cost estimation and layout accuracy.
Walk-through mode — users can navigate the showroom freely with mouse or touch controls, simulating a real-life visit.