A premium, interactive 3D web application allowing users to customize luxury bags in real-time. Built with Next.js, React Three Fiber (Three.js), GSAP, and Zustand.
- Real-time 3D Customization: Seamlessly switch between different bag models (Tote, Backpack, Messenger, etc.).
- Material & Color Control: Customize individual components including the bag body, straps, and hardware (zippers/buckles).
- Personalized Branding: Upload your own monograms or decals with full control over scale and positioning on the 3D model.
- Interactive UI: Sleek, accordion-based configuration panel with glassmorphism effects.
- High Fidelity: Smooth GSAP-powered transitions and high-quality PBR materials.
- Design Export: Download your custom creation as a high-resolution PNG directly from the 3D scene.
- Cart Integration: Add your customized designs to a shopping bag with calculated pricing.
- Framework: Next.js
- 3D Engine: Three.js via React Three Fiber
- 3D Utilities: Drei
- Animations: GSAP & Framer Motion
- State Management: Zustand
- Styling: Tailwind CSS
- Icons: Lucide React
- Node.js 18+
- npm or yarn
-
Clone the repository:
git clone <repository-url> cd 3d-bag-customizer
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser to see the result.
- Models: Select the bag silhouette from the left-hand sidebar.
- Materials: Use the "Materials & Colors" accordion to change the primary and accent colors.
- Monogram: Upload an image in the "Monogram & Decals" section. You can then use the sliders to adjust the size and position on the bag's surface.
- Export: Click the download icon in the top right to save a screenshot of your design.
The app is optimized for performance and can be deployed easily on platforms like Vercel or Netlify.
npm run buildThe build output is located in the .next directory.
This project is for demonstration purposes. Use according to the license terms of the assets involved.