Kitchen 3D

A modern interactive kitchen configurator built with Vue 3 and Three.js.

Kitchen 3D is a real-time 3D web experience focused on kitchen visualization and customization. The project combines a modern frontend architecture with WebGL rendering to allow users to explore materials, colors, dimensions, and kitchen configurations directly in the browser.

The application was designed with a strong emphasis on visual presentation, immersive interaction, and scalable component architecture.

Preview

Landing Page

The landing page introduces the configurator with a modern, premium-inspired interface focused on interior design and architecture aesthetics.

3D Configurator

Users can interact with a real-time 3D kitchen scene, customize materials and finishes, and preview the result instantly.

Features

• Real-time 3D kitchen visualization
• Interactive material customization
• Dynamic color selection system
• Kitchen dimension controls
• Modular component architecture
• Responsive modern UI
• State management with Pinia
• SPA routing with Vue Router
• Real-time rendering using Three.js and WebGL
• Scalable frontend structure for future expansion

Tech Stack

Frontend

• Vue 3
• Vite
• Vue Router
• Pinia

3D Rendering

• Three.js
• WebGL

Project Structure

kitchen-3d/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── ConfiguratorView.vue
│   │   ├── ContactForm.vue
│   │   ├── HeroSection.vue
│   │   ├── HomeView.vue
│   │   ├── Scene3D.vue
│   │   ├── LayOut/
│   │   └── UI/
│   ├── router/
│   ├── store/
│   └── style.css
├── package.json
└── vite.config.js

Core Architecture

Scene3D.vue

The Scene3D.vue component acts as the main Three.js integration layer and is responsible for:

• Scene initialization
• Camera setup
• Lighting configuration
• Renderer lifecycle
• Real-time updates
• User interaction handling

State Management

The application uses Pinia to centralize kitchen configuration state, enabling reactive updates across:

• Materials
• Colors
• Dimensions
• UI selections
• Configurator controls

UI System

Reusable UI components were created for customization controls such as:

• Material grids
• Color pickers
• Dimension sliders
• Selection chips

This modular approach keeps the configurator scalable and maintainable.

Getting Started

Clone the repository

git clone https://github.com/WillyPbatista/kitchen-3d.git

Navigate into the project

cd kitchen-3d

Install dependencies

npm install

Run development server

npm run dev

The project will run locally at:

http://localhost:5173

Production Build

npm run build

Future Improvements

• Advanced lighting and shadows
• Physically based rendering (PBR)
• GLTF/GLB model pipeline
• Camera presets and transitions
• Realistic material textures
• Drag-and-drop kitchen modules
• Performance optimizations
• Mobile gesture controls
• Persistent project saving
• Product pricing system
• Full kitchen layout editor

Design Direction

The visual direction of the project is inspired by:

• Premium interior design tools
• Architectural visualization interfaces
• Modern configurator experiences
• Minimal industrial UI aesthetics

The interface intentionally combines dark cinematic visuals with gold accent colors to create a premium product-focused experience.

Motivation

Kitchen 3D started as an exploration of how modern frontend technologies can merge with interactive 3D experiences to create immersive product configurators directly in the browser.

The project also serves as a foundation for experimenting with scalable UI systems, real-time rendering workflows, and interactive visualization experiences.

Author

Created by William Javier Perez Batista.

GitHub: https://github.com/WillyPbatista

License

This project is open source and available under the MIT License.