Skip to content

PixelThreads: Transforming e-commerce with a 3D product store where users can customize and visualize clothes in a unique and immersive way. Powered by React, Three.js, Framer Motion, and Tailwind CSS for a cutting-edge user experience. Explore the future of online shopping!

Notifications You must be signed in to change notification settings

arshad-syed18/PixelThreads-3DProductStore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PixelThreads - A 3D Product Store

Welcome to PixelThreads, a 3D Product Store that offers a unique e-commerce experience, allowing users to customize and visualize clothes in 3D. This platform enables users to pick shirt colors, upload logos and textures, and even generate designs using Stable Diffusion AI for different clothing items. This platform was developed using React, Threejs, framer motion and tailwindcss. Below, is a brief overview of the project and its dependencies.
Try it out at https://pixelthreads-emgv.onrender.com/

Features

  • 3D T-Shirt Visualization: See your T-Shirt designs come to life in a lifelike 3D model.
  • Diverse Wardrobe Selection: Explore and select from an extensive range of wardrobe options.
  • Color Picker: Explore a diverse palette to personalize your shirt. Mix and match colors for various components such as button accents.
  • Texture Customization: Upload your own textures to create unique designs.
  • AI-Driven Design Creation: Employ Stable Diffusion AI for effortless logo and texture generation based on your creative prompts.

Getting Started

  1. Clone the repository.
  2. Set up the server dependencies using npm install in the server directory.
  3. Set up the client dependencies using npm install in the client directory.
  4. Start the server and client applications.
    • server start command : npm start
    • client start command : npm run dev
  5. Explore and customize Clothes in 3D!

Note: Easily add other clothing items by referencing the Tshirt.jsx file and incorporating additional 3D models. Quickly generate geometry and mesh for your model using the command npx gltfjsx model.glb.

Screenshots

Landing Page

Landing Page

Color Picker

Color Picker

Setting Texture & Logo

Setting Texture

Setting AI Texture

Setting AI Texture

Switching Product

Changing The Model

Contributing

Contributions from the community are welcome. If you'd like to enhance the project or fix issues, please fork the repository and create a pull request.

About

PixelThreads: Transforming e-commerce with a 3D product store where users can customize and visualize clothes in a unique and immersive way. Powered by React, Three.js, Framer Motion, and Tailwind CSS for a cutting-edge user experience. Explore the future of online shopping!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published