Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shubhojit-mitra-dev/tshirt-customizer

A 3D Tshirt customization website using ThreeJS and UV Mapping for real time color changes and Custom logo mapping on Tshirt. AI features to generate tshirt textures and logo with user prompt.
https://github.com/shubhojit-mitra-dev/tshirt-customizer

express react-18 tailwindcss threejs

Last synced: 21 days ago
JSON representation

A 3D Tshirt customization website using ThreeJS and UV Mapping for real time color changes and Custom logo mapping on Tshirt. AI features to generate tshirt textures and logo with user prompt.

Awesome Lists containing this project

README 

          
# 🎨 3D T-Shirt Customizer



A modern, interactive 3D t-shirt customization platform built with React Three Fiber and AI-powered design generation. Create unique, personalized t-shirts with real-time 3D visualization and AI-generated designs.



![T-Shirt Customizer](./client/public/image.png)



## ✨ Features



### 🎯 Core Features

- **3D Real-time Visualization**: Interactive 3D t-shirt model with realistic lighting and shadows

- **AI-Powered Design Generation**: Generate unique designs using Pollinations AI

- **Color Customization**: Choose from unlimited colors for your t-shirt base

- **Logo & Pattern Placement**: Add logos or full-texture patterns to your t-shirt

- **File Upload Support**: Upload your own images for custom designs

- **Responsive Design**: Works seamlessly across desktop and mobile devices



### 🛠️ Technical Features

- **WebGL Rendering**: Powered by Three.js for smooth 3D graphics

- **Real-time State Management**: Using Valtio for reactive state updates

- **Smooth Animations**: Framer Motion animations for enhanced UX

- **Modern UI/UX**: Clean, intuitive interface with Tailwind CSS

- **RESTful API**: Backend API for AI image generation

- **Cloud Deployment**: Ready for production deployment



## 📋 Prerequisites



Before you begin, ensure you have the following installed:

- **Node.js** (v16 or higher)

- **npm** or **yarn**

- **Git**



## 🔧 Installation



### 1. Clone the Repository



```bash

git clone https://github.com/yourusername/tshirt-customizer.git

cd tshirt-customizer

```



### 2. Backend Setup



```bash

cd server

npm install

```



#### Environment Variables



Create a `.env` file in the server directory:



```env

PORT=8080

NODE_ENV=development

```



#### Start Backend Server



```bash

# Development

npm run dev



# Production

npm start

```



The backend will run on `http://localhost:8080`



### 3. Frontend Setup



```bash

cd ../client

npm install

```



#### Environment Variables



Create a `.env` file in the client directory:



```env

VITE_BACKEND_URL=http://localhost:8080/api/v1/ai-image

```



For production, create `.env.production`:



```env

VITE_BACKEND_URL=https://your-backend-url.vercel.app/api/v1/ai-image

```



#### Start Frontend Development Server



```bash

npm run dev

```



The frontend will run on `http://localhost:5173`



## 🏗️ Project Structure



```

tshirt-customizer/

├── client/                          # Frontend React application

│   ├── public/

│   │   ├── shirt_baked.glb         # 3D T-shirt model

│   │   ├── threejs.png             # Default logo

│   │   └── image.png               # Preview image

│   ├── src/

│   │   ├── assets/                 # Static assets

│   │   ├── canvas/                 # 3D Canvas components

│   │   │   ├── Backdrop.jsx        # Shadow/lighting setup

│   │   │   ├── CameraRig.jsx       # Camera controls

│   │   │   ├── Shirt.jsx           # 3D T-shirt component

│   │   │   └── index.jsx           # Main canvas

│   │   ├── components/             # Reusable components

│   │   │   ├── AIPicker.jsx        # AI prompt interface

│   │   │   ├── ColorPicker.jsx     # Color selection

│   │   │   ├── CustomButton.jsx    # Custom button component

│   │   │   ├── FilePicker.jsx      # File upload component

│   │   │   └── Tab.jsx             # Tab component

│   │   ├── config/                 # Configuration files

│   │   │   ├── config.js           # Environment config

│   │   │   ├── constants.js        # App constants

│   │   │   ├── helpers.js          # Helper functions

│   │   │   └── motion.js           # Animation configs

│   │   ├── pages/                  # Main pages

│   │   │   ├── Customizer.jsx      # Customization interface

│   │   │   └── Home.jsx            # Landing page

│   │   ├── store/                  # State management

│   │   │   └── index.js            # Valtio store

│   │   └── styles/                 # Global styles

│   ├── package.json

│   └── vite.config.js

├── server/                         # Backend Node.js application

│   ├── controllers/

│   │   └── ai-image.controllers.js # AI image generation logic

│   ├── routes/

│   │   └── ai-image.routes.js      # API routes

│   ├── index.js                    # Express server

│   ├── package.json

│   └── vercel.json                 # Vercel deployment config

└── README.md

```



## 🎮 Usage



### Getting Started



1. **Launch the Application**: Navigate to `http://localhost:5173`

2. **Click "Customize It"**: Enter the 3D customization mode

3. **Choose Your Style**: Use the sidebar tools to customize your t-shirt



### Customization Options



#### 🎨 Color Picker

- Select any color for your t-shirt base

- Real-time color updates on the 3D model

- Smooth color transitions with easing animations



#### 🖼️ File Upload

- Upload PNG, JPG, or other image formats

- Automatically converts images for 3D texture mapping

- Supports both logo and full-texture modes



#### 🤖 AI Design Generator

- Enter descriptive prompts (e.g., "futuristic geometric pattern")

- AI generates unique designs based on your description using Pollinations AI

- Instantly applies generated images to your t-shirt



#### 👕 Display Options

- **Logo Mode**: Places design as a small logo on the chest

- **Full Texture**: Applies design across the entire t-shirt

- Toggle between modes for different looks



## 🔌 API Documentation



### Base URL

```

Development: http://localhost:8080/api/v1

Production: https://your-backend-url.vercel.app/api/v1

```



### Endpoints



#### Health Check

```http

GET /

```

**Response:**

```json

{

  "message": "health check"

}

```



#### AI Image Route Info

```http

GET /ai-image

```

**Response:**

```json

{

  "message": "Hello from AI Image Route"

}

```



#### Generate AI Image

```http

POST /ai-image

```



**Request Body:**

```json

{

  "prompt": "create a tiger skin pattern texture design for a t-shirt"

}

```



**Response:**

```json

{

  "photo": "base64_encoded_image_data"

}

```



**Error Response:**

```json

{

  "message": "Something went wrong"

}

```



## 🛠️ Tech Stack



### Frontend

- **React 18** - Modern React with hooks

- **Vite** - Fast build tool and dev server

- **Three.js** - 3D graphics library

- **@react-three/fiber** - React renderer for Three.js

- **@react-three/drei** - Useful helpers for R3F

- **Valtio** - Proxy-state library for React

- **Framer Motion** - Animation library

- **Tailwind CSS** - Utility-first CSS framework



### Backend

- **Node.js** - JavaScript runtime

- **Express.js** - Web application framework

- **Pollinations AI** - AI image generation service

- **node-fetch** - HTTP client for API requests

- **CORS** - Cross-origin resource sharing

- **dotenv** - Environment variable management



### Development Tools

- **ESLint** - Code linting

- **PostCSS** - CSS processing

- **Nodemon** - Auto-restart server during development



## 🚀 Deployment



### Frontend Deployment (Vercel)



1. **Build the project:**

   ```bash

   cd client

   npm run build

   ```



2. **Deploy to Vercel:**

   ```bash

   npm i -g vercel

   vercel --prod

   ```



3. **Set environment variables** in Vercel dashboard:

   - `VITE_BACKEND_URL`: Your backend API URL



### Backend Deployment (Vercel)



1. **Configure `vercel.json`** (already included):

   ```json

   {

     "version": 2,

     "builds": [{ "src": "index.js", "use": "@vercel/node" }],

     "routes": [{ "src": "/(.*)", "dest": "index.js" }]

   }

   ```



2. **Deploy:**

   ```bash

   cd server

   vercel --prod

   ```



3. **Set environment variables** in Vercel dashboard:

   - `NODE_ENV`: production



### Alternative Deployment Options



#### Frontend

- **Netlify**: Connect your GitHub repo and deploy automatically

- **GitHub Pages**: For static hosting

- **Firebase Hosting**: Google's hosting service



#### Backend

- **Heroku**: Traditional PaaS platform

- **Railway**: Modern deployment platform

- **DigitalOcean App Platform**: Scalable hosting



## 🔧 Configuration



### Environment Variables



#### Client (.env)

```env

VITE_BACKEND_URL=http://localhost:8080/api/v1/ai-image

```



#### Server (.env)

```env

PORT=8080

NODE_ENV=development

```



### Vite Configuration

The project uses Vite for fast development and optimized production builds. Key configurations:

- **Hot Module Replacement (HMR)** for instant updates

- **ESM support** for modern JavaScript

- **Optimized builds** with code splitting

- **CSS processing** with PostCSS and Tailwind



## 📱 Browser Support



- **Chrome** 90+

- **Firefox** 88+

- **Safari** 14+

- **Edge** 90+



*WebGL support required for 3D functionality*



## 🐛 Troubleshooting



### Common Issues



#### 3D Model Not Loading

- Ensure `shirt_baked.glb` is in the `client/public/` directory

- Check browser console for WebGL errors

- Verify browser supports WebGL



#### AI Image Generation Failing

- Check if backend server is running

- Verify `VITE_BACKEND_URL` is correctly set

- Check network connectivity

- Ensure Pollinations AI service is accessible



#### Build Errors

- Clear node_modules and reinstall: `rm -rf node_modules && npm install`

- Check Node.js version compatibility

- Verify all environment variables are set



#### CORS Issues

- Ensure backend CORS is properly configured

- Check if frontend and backend URLs match

- Verify environment variables are correct



## 🔥 Performance Optimization



### Frontend Optimizations

- **Lazy Loading**: Components load only when needed

- **Texture Compression**: Optimized 3D model textures

- **Code Splitting**: Automatic bundle optimization

- **Asset Caching**: Browser caching for static assets



### Backend Optimizations

- **Response Compression**: Gzip compression enabled

- **Request Validation**: Input validation and sanitization

- **Error Handling**: Comprehensive error management

- **API Rate Limiting**: Protection against abuse



## 📊 Features in Detail



### 3D Rendering Engine

- **Real-time Lighting**: Dynamic shadow casting and ambient lighting

- **Material Shaders**: Realistic fabric material with proper roughness and metalness

- **Camera Controls**: Smooth camera movements and responsive controls

- **Texture Mapping**: High-quality texture application and UV mapping



### State Management

- **Valtio Integration**: Proxy-based state with automatic reactivity

- **Persistent State**: State preservation across navigation

- **Optimistic Updates**: Instant UI feedback for better UX

- **State Synchronization**: Real-time 3D model updates



### AI Integration

- **Pollinations AI**: Free, unlimited image generation

- **Prompt Processing**: Natural language to image conversion

- **Base64 Encoding**: Efficient image data transfer

- **Error Handling**: Robust error management and user feedback



---



**Made with ❤️ for the 3D web community**



*Unleash your imagination and define your own style!*