3D Product Studio

A modern 3D web-based product customization platform built with React, TypeScript, and Three.js.
This application allows users to customize individual shoe components in real-time and export a finalized product image generated by the server.

---

🚀 Overview

3D Product Studio enables interactive product personalization using a high-performance 3D rendering pipeline powered by:

• @react-three/fiber
• @react-three/drei
• Three.js
• Tailwind CSS
• React Color Picker

Users can: - Select different shoe components (e.g., Swoosh, Toe, Quarter, Laces, etc.) - Change colors dynamically - Apply materials (Leather, Denim, Fur, Alligator, etc.) - Preview updates in real-time 3D - Export the final configuration - Receive a completed product image from the backend server

---

🏗️ Architecture

Frontend

• React 18 + TypeScript
• Three.js rendering via React Three Fiber
• Component-driven architecture
• Tailwind CSS for UI styling
• State-driven configuration system

Backend (External Service)

When the user exports the design: 1. The client sends the current configuration (colors + materials). 2. The backend renders the finalized product image. 3. The server responds with a completed shoe image. 4. The client receives and displays/downloads the generated photo.

---

📂 Project Structure

public/
  ├── shoe-model-10.glb
  ├── texture-*.png
  └── index.html

src/
  ├── components/
  │   ├── ConfigPanel.tsx
  │   ├── MaterialPanel.tsx
  │   ├── ImageSelector.tsx
  │   ├── Model.tsx
  │   ├── SceneCapturer.tsx
  │   └── ObjectsPanel.tsx
  ├── Interfaces/
  ├── App.tsx
  └── index.tsx

---

🎨 Features

• Real-time 3D shoe rendering
• Component-based customization
• Dynamic material switching
• Color picker integration
• Config summary panel
• Export functionality
• GLB model integration
• Texture mapping system

---

🛠️ Installation

1. Clone the repository

git clone <your-repository-url>
cd 3d-Product-Studio

2. Install dependencies

npm install

3. Start development server

npm start

The app will run at:

http://localhost:3000

---

📦 Build for Production

npm run build

Production build will be generated inside:

/build

---

📡 Export Workflow

1. User customizes the product.
2. User clicks Export Frame.
3. Current configuration is serialized.
4. Request is sent to the backend service.
5. Backend generates a completed product image.
6. The final rendered image is returned to the client.

---

🔧 Dependencies

Main libraries:

• React
• TypeScript
• Three.js
• @react-three/fiber
• @react-three/drei
• React Color
• Tailwind CSS
• JSZip

---

🧪 Testing

npm test

---

📐 Design Reference

Figma Design:
https://www.figma.com/design/VMnrICcfI2g9T42SEnuUsH/3d-Product-Studio

---

🛡️ Best Practices Implemented

• Strong typing with TypeScript
• Modular component architecture
• Clear separation between UI and 3D logic
• Maintainable texture/material mapping system
• Production-ready build configuration

---

📈 Future Enhancements

• Multi-product support
• Persistent configuration storage
• User authentication
• Order management integration
• Cloud rendering optimization
• Admin dashboard for product control

---

📄 License

This project is private and proprietary.

---

👨‍💻 Author

3D Product Studio -- Interactive Web-Based Product Customization Platform