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:

   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:

   npm install
   

3. Start the development server:

   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.