> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.dawsenai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Materials

> Interactive 3D product customization with materials, textures, colors, backgrounds, and lighting

## Overview

The Product Configurator (`/materials`) lets you customize 3D product models in real time. Apply materials, textures, colors, backgrounds, and lighting to pre-loaded models. Export your configuration as a screenshot or JSON.

## How It Works

<Steps>
  <Step title="Select a Model">
    Choose from the pre-loaded product models in the left panel, organized by
    category (glass, pod, mod, etc.).
  </Step>

  <Step title="Select a Part">
    Click on a part of the 3D model in the viewer to select it. The right panel
    updates to show customization options for that part.
  </Step>

  <Step title="Apply Material">
    Choose a material from the Material section. Materials are organized by
    category (Glossy, Soft Touch, Frosted, Electroplated, etc.).
  </Step>

  <Step title="Apply Texture">
    Optionally apply a texture overlay. Upload a custom texture image or choose
    from the built-in options.
  </Step>

  <Step title="Set Color">
    Pick a color for the selected part using the color swatches or enter a
    custom hex value.
  </Step>

  <Step title="Set Background">
    Choose a background color or upload a custom background image for the scene.
  </Step>

  <Step title="Set Lighting">
    Choose a lighting preset (Studio or Ambient) to change the HDRI environment
    lighting. This affects how materials reflect light and the overall mood of
    the scene.
  </Step>

  <Step title="Save or Export">
    Save your configuration for later or export a screenshot of the current
    view.
  </Step>
</Steps>

## Left Panel — Models

### Pre-loaded Models

Models are organized into categories accessible via the icon row:

* Glass devices
* Pod systems
* Box mods
* Disposables
* And more

Click a category icon to browse its models. Click a model thumbnail to load it in the 3D viewer.

### Saved Configurations

Click **Saved Models** to access previously saved configurations. Load any saved config to restore all material, texture, color, and background settings.

## Right Panel — Customization

### Material

Select a material for the currently selected part. Materials are grouped by finish type:

| Category          | Examples                       |
| ----------------- | ------------------------------ |
| **Glossy**        | High-gloss finish, mirror-like |
| **Soft Touch**    | Matte rubber-feel finish       |
| **Frosted**       | Translucent frosted glass      |
| **Electroplated** | Metallic chrome/gold finish    |
| **Gradient**      | Multi-color gradient finishes  |

### Texture

Apply a texture pattern on top of the material:

* Choose from built-in texture swatches
* Upload a custom texture image (PNG, JPEG)

### Color

Set the base color for the selected part:

* Click a color swatch for quick selection
* Use the color picker for precise control
* Enter a hex value directly

### Background

Customize the scene background:

* Click the color swatch to open the color picker
* Upload a custom background image

### Lighting

Switch between HDRI environment lighting presets:

* **Studio** — Bright, even studio lighting for clean product shots
* **Ambient** — Softer, diffused lighting for a natural look

The lighting preset affects reflections and overall scene mood across all materials.

## 3D Viewer Controls

* **Rotate**: Click and drag to orbit around the model
* **Zoom**: Scroll to zoom in/out
* **Reset**: Click the reset button to restore the default camera position

## Saving & Exporting

### Save Configuration

Click **Save** to store your current configuration (model, all part materials, textures, colors, background) to your account. Saved configurations can be reloaded at any time.

### Export as JSON

Click **Export** to download your configuration as a JSON file. This can be used to share or restore configurations.

### Download Screenshot

Use the **Download** button to capture the current 3D view as a PNG image.

## Tips

<AccordionGroup>
  <Accordion title="Select parts precisely">
    Click directly on the part of the model you want to customize. Hovering
    shows which part will be selected.
  </Accordion>

  <Accordion title="Drag and drop materials">
    You can drag a material swatch from the left panel and drop it directly onto
    a part in the 3D viewer.
  </Accordion>

  <Accordion title="Save before experimenting">
    Save your current configuration before trying new materials so you can
    easily revert.
  </Accordion>
</AccordionGroup>