3D T-Shirt Customizer

A full-stack web application that allows users to design and customize 3D t-shirts in real time. Users can apply custom logos, use full-image textures, and even generate graphics with AI. The app features an interactive 3D canvas for live design previews, color picking, image uploads, and AI-powered image generation for unique shirt designs.

Features

• 3D Real-Time Customization: View shirt changes instantly in a 3D canvas.
• Color Picker: Pick any color for your t-shirt base.
• Logo & Full Texture Upload: Add logos or full-shirt images by uploading your own files.
• AI Image Generation: Generate custom graphics using AI by entering a prompt.
• Responsive UI: Built with React, Tailwind CSS, and Three.js for a modern, smooth experience.

Tech Stack

• Frontend: React, Three.js (@react-three/fiber, @react-three/drei), Tailwind CSS, Valtio (state management), Framer Motion (animations)
• Backend: Node.js, Express (for AI image generation API integration)
• AI Integration: HuggingFace API or similar for image generation

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

1. Clone the Repository

git clone https://github.com/sayam-1705/3d-tshirt-customizer.git
cd 3d-tshirt-customizer

2. Install Dependencies

Install frontend dependencies:

cd client
npm install

Install backend dependencies:

cd ../server
npm install

3. Setup Environment Variables

Create a .env file in the /server directory.

Sample .env file for backend:

HF_API_KEY=your_huggingface_api_key_here

• HF_API_KEY: Your HuggingFace API key for AI image generation.

4. Run the Application

Start the backend server:

cd server
npm start

Start the frontend app:

cd ../client
npm start

• The frontend runs on http://localhost:3000 by default.
• The backend API runs on http://localhost:8080.

---

Usage

• Open the app in your browser.
• Click "Customize It" to start designing.
• Use the left panel to pick colors, upload files, or generate images with AI.
• Toggle between logo and full-shirt modes using filter tabs.

---

License

This project is for demonstration purposes.