> ## Documentation Index
> Fetch the complete documentation index at: https://pavan-c90e8846.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AI 3D Model Generator: Text and Image to 3D

> Generate high-quality 3D models from images or text using Rodin AI. Built with Next.js 15 and Three.js, deployed on Vercel for instant access.

AI 3D Model Generator is a full-stack web application that transforms text prompts and images into production-ready 3D models powered by Rodin AI. The app is live at [https://3d-aimg-pavan.vercel.app](https://3d-aimg-pavan.vercel.app) and features a real-time 3D viewer, advanced generation options, and a model analytics dashboard.

<CardGroup cols={2}>
  <Card title="Image-to-3D" icon="image">
    Upload one or multiple images and convert them into detailed 3D models. Automatic background removal ensures clean geometry generation from product photos or reference images.
  </Card>

  <Card title="Text-to-3D" icon="font">
    Describe any object or scene in natural language and generate a corresponding 3D model. Hybrid mode combines text prompts with reference images for fine-grained control.
  </Card>

  <Card title="Quality Presets" icon="sliders">
    Choose from 6 built-in quality presets that balance generation speed against mesh detail, texture resolution, and polygon count for your target use case.
  </Card>

  <Card title="3D Viewer" icon="cube">
    Inspect generated models instantly in a real-time preview powered by Three.js, @react-three/fiber, and @react-three/drei. Rotate, zoom, and pan directly in the browser.
  </Card>

  <Card title="Facial Enhancement" icon="face-smile">
    Access advanced AI options including facial enhancement for character models, expression refinement, and specialized optimization for portrait and avatar generation.
  </Card>

  <Card title="Analytics" icon="chart-column">
    Track all your generated models in a built-in analytics dashboard. View generation history, success rates, processing times, and model statistics at a glance.
  </Card>
</CardGroup>

## Architecture

The application follows a modular component architecture orchestrated by a central Rodin component that manages state, API communication, and rendering:

* **Rodin Component**: The main orchestrator that coordinates the entire application flow, manages global state, and connects UI components to the Rodin AI API.
* **EnhancedForm**: A comprehensive form with 80+ configuration options validated by Zod, covering quality, geometry, texture, and post-processing settings.
* **SmartOptionsPanel**: Dynamically renders parameter controls based on selected generation mode, showing only relevant options for image-to-3D, text-to-3D, or hybrid workflows.
* **ModelViewer**: Renders the generated 3D model using Three.js with @react-three/fiber and @react-three/drei, providing an interactive viewport inside the browser.
* **api-service.ts**: Handles all API interactions including job submission to `/api/rodin`, status polling via `/api/status`, and file retrieval through `/api/download`.

## Tech Stack

| Technology | Version / Details |
| - | - |
| TypeScript | 96.7% of codebase |
| Next.js | 15.2.4 (App Router) |
| React | 19 |
| Three.js | Core 3D engine |
| @react-three/fiber | React renderer for Three.js |
| @react-three/drei | Utility components for R3F |
| Radix UI | Accessible primitives |
| shadcn/ui | Component library |
| Tailwind CSS | Utility-first styling |
| React Hook Form | Form state management |
| Zod | Schema validation |
| Recharts | Analytics charts |
| Sonner | Toast notifications |

## Key Components

| Component | Size | Purpose |
| - | - | - |
| `rodin.tsx` | 42KB | Main application orchestrator; manages global state, API flow, and renders child components |
| `enhanced-form.tsx` | 85KB | 80+ form fields with Zod validation for generation parameters |
| `model-viewer.tsx` | \~ | Interactive 3D preview using Three.js and R3F |
| `smart-options-panel.tsx` | \~ | Dynamic options panel that adapts to selected generation mode |
| `model-analytics.tsx` | \~ | Dashboard for viewing generation history and statistics |
| `advanced-loading-screen.tsx` | \~ | Animated loading screen with progress feedback during generation |

## Install and Run Locally

Get the app running on your machine in three commands:

<CodeGroup>
  ```bash pnpm theme={null}
  git clone https://github.com/pavana05/ai-3d-model.git
  cd ai-3d-model
  pnpm install
  pnpm dev
  ```

  ```bash npm theme={null}
  git clone https://github.com/pavana05/ai-3d-model.git
  cd ai-3d-model
  npm install
  npm run dev
  ```

  ```bash yarn theme={null}
  git clone https://github.com/pavana05/ai-3d-model.git
  cd ai-3d-model
  yarn install
  yarn dev
  ```
</CodeGroup>

Then open [http://localhost:3000](http://localhost:3000). See the [Quickstart](/ai-3d-model/quickstart) for environment variable setup and deployment options.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.