This project is a Virtual Product Customization App developed using React.js and Three.js. The app allows users to view a 3D product model, customize its color, upload custom images as textures, and generate images using AI-based text input. Additionally, users can select predefined logos or full cover designs for the product.
-
3D Product Model: Utilizes Three.js to render a 3D model of the product, providing users with an interactive and immersive experience.
-
Color Customization: Users can customize the color of the 3D product model using a color picker.
-
Texture Upload: Allows users to upload their own images as textures for the product model, enabling personalization.
-
AI Image Generation: Integration with AI services allows users to generate images based on textual input. The app communicates with the AI service to receive generated images.
-
Predefined Designs: Offers a set of predefined logos and full cover designs that users can select with a click.
-
Image Download: Provides a button to download the customized product image.
-
React.js: A JavaScript library for building user interfaces.
-
Vite: A fast build tool enhancing the development experience for modern web projects.
-
Tailwind CSS: A utility-first CSS framework to customize styles for components.
-
React Color: A color picker component for React.
-
Three.js: A JavaScript library for 3D graphics.
-
Fiber (React Three Fiber): A reimplementation of Three.js in React, providing declarative 3D rendering.
-
React Framer Motion: For animations.
-
Node.js: Used to handle CORS (Cross-Origin Resource Sharing) issues.
-
Volto: State management tool for the application.
Check out the live demo here