A modern 3D wardrobe visualization application built with React Three Fiber, featuring interactive 3D models, VR/AR support, and responsive design.
- Interactive 3D Wardrobe Model: Fully interactive wardrobe with openable doors, drawers, and compartments
- Multiple View Modes: Switch between texture, wireframe, and orthographic views
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- VR/AR Support: Full VR and AR capabilities with proper head tracking
- Measurement Tools: Interactive measurement system with visual guides
- Image Gallery: Built-in photo gallery showcasing project stages
- Real-time 3D Rendering: High-performance WebGL rendering with shadows
- Smooth Animations: Tweened camera transitions and interactive animations
- Layer Management: Multi-layer rendering system for complex scenes
- Grid System: Optional grid overlay for spatial reference
- Gizmo Controls: 3D navigation helpers for better user experience
- React 19 - Modern React with latest features
- Next.js 15 - Full-stack React framework with Turbopack
- TypeScript - Type-safe development
- Sass - CSS preprocessing with modules
- Three.js - Core 3D graphics library
- React Three Fiber - React renderer for Three.js
- React Three Drei - Useful helpers and abstractions
- React Three XR - VR/AR support
- Tween.js - Smooth animations
- Ant Design - Professional UI component library
- React Image Gallery - Photo gallery functionality
- ESLint - Code linting and formatting
- Prettier - Code formatting
- Yarn - Package management
app/
├── components/
│ ├── Scene.tsx # Main 3D scene with camera controls
│ ├── Wardrobe.tsx # Interactive wardrobe model
│ ├── Mesh.tsx # Custom mesh component with measurement
│ └── LineHint.tsx # Measurement line hints
├── contexts/
│ └── AppContext.tsx # Global state management
├── hooks/
│ ├── useEventListener.ts
│ └── useNonInitialEffect.ts
├── Intro.tsx # Landing page with project info
├── App.tsx # Main application component
└── *.module.scss # Component-specific styles
- Mouse: Orbit around the wardrobe
- Scroll: Zoom in/out
- Click: Interact with doors and drawers
- Keyboard: Layer switching (0-3)
- Touch: Pan and zoom gestures
- Tap: Interact with wardrobe elements
- Swipe: Navigate image gallery
- Head Movement: Natural head tracking
- Controllers: Hand tracking for interactions
- Teleportation: Move around the scene
- Node.js 18+
- Yarn package manager
# Clone the repository
git clone <repository-url>
cd wardrobe
# Install dependencies
yarn install
# Start development server
yarn devyarn dev # Start development server (port 4000)
yarn build # Build for production
yarn start # Start production server (port 4001)
yarn lint # Run ESLint
yarn deploy # Deploy to productionNEXT_PUBLIC_BASEPATH=/your-base-path # Optional base path for assets- Place GLB files in
/public/models/ - Update the model path in
Wardrobe.tsx - Adjust materials and animations as needed
- Component styles:
*.module.scssfiles - Global styles:
App.module.scss - Responsive breakpoints: 768px (tablet), 480px (mobile)
The application uses React Context for state management:
wireframe: Toggle wireframe modeorthographic: Switch camera projectiongrid: Show/hide grid overlayhideFronts: Hide wardrobe frontslayer: Current rendering layer (0-3)view: Camera view stategizmo: Show navigation gizmo
- Desktop: > 768px - Full feature set
- Tablet: ≤ 768px - Optimized layout
- Mobile: ≤ 480px - Touch-optimized interface
- Touch-friendly controls
- Responsive typography
- Optimized 3D performance
- Full-screen VR support
- Texture/solid/wireframe mode
- Camera animations on site scroll
- Project stages navigation
- Wardrobe-only renders
- Full room renders
- HDR environment mapping
- Interior lighting system
- Disassembly animations
- Advanced measurement tools
- Smooth scroll integration
- Video rendering capabilities
- Advanced vertex measurement tools
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is private and proprietary.