# Create 3D Configurator

## Final Result :tada:

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FWN161s7aukvdGkTqZtJ5%2FBildschirmaufnahme2024-11-25114819-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=ffaca31c-6eef-470e-8be8-ba6d3bf332c0" alt=""><figcaption><p>Two variants, each with a Texture Operation.</p></figcaption></figure>

## Getting Started

Go to the Conf tab and click on "+Add Variant".

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FTdIkjsUQ26U7Z3GoWp5n%2FBildschirmaufnahme2024-11-22125023-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=78052c4f-fb10-45d6-8aea-d746a451348a" alt=""><figcaption></figcaption></figure>

## Variant Settings

**ID/Trigger:**

**Title:** The Title will be shown as the Variant name.

**Bubble Image / Dropdown:** Choose between different layout options

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FZrADDkE9YGuMLlDOvqAh%2FBildschirmaufnahme2024-11-22130940-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=bbf0a6bb-98c4-48a2-acb7-5aa0b3fc4cb7" alt=""><figcaption></figcaption></figure>

## Operations

The **Variant Operations** feature allows you to customize 3D models by adding selectable variants. Each variant can be chosen through an image-based selector or a dropdown menu. Variants can include operations that modify the model in two ways:

* **Texture Operations:** Change the material's base color, normal, occlusion, and/ or emissive textures for specific parts of the model based on the selected variant.
* **Mesh Operations:** Show or hide specific meshes within the model based on the selected variant.

### Texture Operation:

Select the wanted material and upload the texture for Base Color - , Normal Map - , Emissive - and / or Occlusion Texture. By selecting the configured variant via dropdown or bubble image (depending which one you selected), you should now see the texture applied on the model. You can add as many operations as needed.

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2F2J7QBrjkAdcsJFgtRPzq%2FScreenshot%202024-11-22%20132533.png?alt=media&#x26;token=e73ec8f2-0339-4a2d-9d27-1a3fd10c56ac" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Click the eye icon next to the file input to remove the texture. Keep in mind that you may need to re-apply it when switching to the next variant.
{% endhint %}

### Mesh Operation:

#### Visibility (Show/Hide)

Select the Mesh you want to Show / Hide. By selecting the "Hide" Option, the mesh gets invisible when selecting this specific variation. When selecting the "Show" Option, the mesh gets visible. You can also combine multiple Mesh Operations.

In the following example, we created two Variations. Each with multiple Mesh Operations To Show And Hide the Arms of the chair:

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FpRPnW4mY7xGLKxiOrCOe%2FBildschirmaufnahme2024-11-22135718-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=9f44394c-0c2e-44c5-ad6b-40f4e9adfd77" alt=""><figcaption></figcaption></figure>

When selecting the different Variation, the arms now get invisible.

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FGh0chE99TOX6dL5xtkAo%2FBildschirmaufnahme2024-11-22140830-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=efa84995-3980-4b39-8c78-28a381b6ea17" alt=""><figcaption></figcaption></figure>

#### Assemble

Select the **Assemble** mode for more complex projects. You can choose between *swap*, *add*, or *remove* operations.

* **Swap** replaces the selected mesh with a new GLB.
* **Add** inserts a new GLB into the scene.
* **Remove** deletes the selected mesh from the mesh list.

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FRWWcW96mxjfHqZTaBxO0%2Fimage.png?alt=media&#x26;token=8020342c-2ac9-452d-b4c0-25d6259b422a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The GLB’s position and rotation must be aligned correctly. If it isn’t, you can fix it in Blender or by using our built-in Advanced Editor.
{% endhint %}

## Configurator Controls

In case you don't need the User Interface inside the Viewer Container, you can hide the User Interface by selecting the "Hide" Option:

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2Ff2mLuu1QqeZH6Qm1d49i%2FBildschirmaufnahme2024-11-22141711-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=ded91d4b-8181-4ff3-838c-3547aec31ee2" alt=""><figcaption></figcaption></figure>

It's recommended to hide the Configure Controls if you already have your own User Interface integrated in your shop. You can also control the variations with your own User Interface. See ->[ Variant Integration](https://mazingxr.gitbook.io/mazing-world/integration-types/gallery-integration)

When selecting "Hide In Frame", the UI is not visible in the Viewer but it's there when opening the direct mazing link to this product.

Congrats! You created your first Variation!
