# VIZ 3D - Product Configurator

An advanced, web-based 3D Product Configurator and Scene Editor built with React, Three.js, and React Three Fiber.

## Core Features

- **3D Scene Editor**: Complete control over 3D scenes, including object transforms, lighting, and environments.
- **Advanced Material & Texture Pipeline**: Features a sophisticated material management system with Triplanar, Planar, Box, and Cylindrical UV mapping projections.
- **AI Image-to-3D Generator**: Native integrations with leading AI generative models (Hunyuan3D, Tripo3D, and Meshy) to seamlessly generate `.glb` 3D assets directly from uploaded reference images.
- **UV Editor**: Powerful 2D UV coordinate editor with live 3D syncing to precisely adjust texture mapping and placement.
- **Drag-and-Drop Imports**: Support for a variety of 3D model formats including `.glb`, `.gltf`, `.fbx`, `.obj`, and `.usdz`.

## Tech Stack

- **Framework**: React (Vite)
- **3D Rendering**: Three.js, `@react-three/fiber`, `@react-three/drei`, `@react-three/postprocessing`
- **Styling**: TailwindCSS
- **State Management**: Zustand
- **AI Integrations**: Tripo3D (v2 API), Meshy (v1 API), Fal.ai (Hunyuan 3D)

## Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation

1. Clone the repository:
   ```bash
   git clone https://scm.ckdigital.in/digifox/cia_product_configurator/cia_product_configurator_frontend_react.git
   cd cia_product_configurator_frontend_react
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Start the development server:
   ```bash
   npm run dev
   ```

### API Keys
If you plan to use the AI Image-to-3D generation features, you will need to supply API keys for the respective services directly within the application settings UI. These are securely stored in your browser's `localStorage`.