Skip to main content

​
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

1

Select a Model

Choose from the pre-loaded product models in the left panel, organized by category (glass, pod, mod, etc.).
2

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.
3

Apply Material

Choose a material from the Material section. Materials are organized by category (Glossy, Soft Touch, Frosted, Electroplated, etc.).
4

Apply Texture

Optionally apply a texture overlay. Upload a custom texture image or choose from the built-in options.
5

Set Color

Pick a color for the selected part using the color swatches or enter a custom hex value.
6

Set Background

Choose a background color or upload a custom background image for the scene.
7

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.
8

Save or Export

Save your configuration for later or export a screenshot of the current view.

​
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:
CategoryExamples
GlossyHigh-gloss finish, mirror-like
Soft TouchMatte rubber-feel finish
FrostedTranslucent frosted glass
ElectroplatedMetallic chrome/gold finish
GradientMulti-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

Click directly on the part of the model you want to customize. Hovering shows which part will be selected.
You can drag a material swatch from the left panel and drop it directly onto a part in the 3D viewer.
Save your current configuration before trying new materials so you can easily revert.