Interactive 3D Kitchen Showroom
In this project, we first modeled the kitchen in 3D with our modeling team. The UI/UX design was handled by our designer, while frontend development was done in React. My focus was on Three.js: loading 3D models, managing baked and dynamic lights, coordinating textures and materials, and calculating real dimensions for accurate cost estimation. Users can select cabinet styles, upper and lower cabinet colors separately, choose matte or high-gloss finishes, and customize countertops and islands. Flooring and backsplash materials can also be changed. The project includes realistic lighting and reflections, providing a near-real-life preview before ordering. Additionally, a walk-through feature allows users to navigate the showroom as if walking inside the space.
Technologies
Three.js
GSAP
React.js
Blender
3DMax
Figma
My Role
Three.js Developer
Project Manager
Client
silktouchjoinery.com.au
Year
2025
Location
Remote Australia
Category
Three.js
3D Showroom
3D Configurator
GSAP
My Proccess
This project is a 3D interactive showroom for a kitchen interior design company, allowing users to explore, customize, and visualize kitchen cabinets in real time.
Steps
Step 1
Users first see the complete kitchen model. They can explore it in 3D and interact with different cabinet styles.
Step 2
Upper and lower cabinets can be customized separately with different textures, colors, and finishes, including matte and high-gloss options.
Step 3
Countertops, islands, flooring, and backsplash materials can be chosen independently. Realistic lighting, reflections, and material properties provide a near-real-life preview.
Step 4
A walk-through feature allows users to navigate the showroom freely with mouse controls, simulating a real-life visit.
Gallery
