Skip to content

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.

Notifications You must be signed in to change notification settings

Israa27/react-3D-product

Repository files navigation

Product virtualization Using React.js and fiber Three.js

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.

Features

  • 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.

Tools Used

  • 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.

    Demo

    Check out the live demo here

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published