# Indexable Model Viewer

This is an Individual product publishing identification feature that enables each asset to be called uniquely to an assigned space when the project is published. 

<figure><img src="/files/s5O0gIayF2FQ8L3xHsjX" alt=""><figcaption></figcaption></figure>

To give a clearer explanation, we will guide you through the steps to publish an e-commerce website featuring 3D models using SwiftXR. For each product on sale, you will import 3D models into the SwiftXR canvas, assign them a unique model ID, and link them with a **Model Swap Parameter** for easy model management. This will allow users to swap between models on the published project.

We will walk you through how to:

1. [Add models to the canvas.](/components/3d-viewer.md)
2. Assign model IDs and a Model Swap Parameter.
3. Publish the project with a URL to view each model.
4. Integrate the project into a website using iframe.

### Step 1: Access the Indexable Model Viewer (IMV)

1. In the SwiftXR platform, navigate to the **Design Components**.
2. Go to [**3D Viewer Components**](/components/3d-viewer.md) and select [**Indexable Model Viewer (IMV)**](/components/indexable-3d-viewer-developers.md).
3. Drag and drop the **IMV** tab into your canvas. This is where you will add your 3D models. Upon adding, you will see a default asset (e.g., a box) displayed to show the viewer is active.

<figure><img src="/files/3CEzqyY044ye7nfRpzhY" alt=""><figcaption></figcaption></figure>

### Step 2: Set Up Indexing and Model Swap Parameters

1. On the right-hand side, click the **PROPERTIES** tab.
2. Scroll to the **Indexing Settings** section. Here, you will see the **Model Swap Parameter** and the **Add Entry** button.
   * The **Model Swap Parameter** is a class index that will house the names of all models in the indexable model viewer.
   * By default, it is named “swf,” but this can be edited by the user.
3. Click the **Add Index Model** button to add your models. For each model added, you will see an **Index ID**. This ID is unique to each model and will be used in the URL to access the specific model.
4. If you wish to rename the **Model Swap Parameter**, you can change it from the default “swf” to something more relevant. In this tutorial, we’ll use “user” as the new parameter.

<figure><img src="/files/6CBrtIC83Zmvgc0mwCOm" alt=""><figcaption></figcaption></figure>

### Step 3: Add Your 3D Models

<figure><img src="/files/EBYea4hU4CfwPXsfbp6m" alt=""><figcaption></figcaption></figure>

1. To add your models, click the **Add Entry** button.
2. Drag and drop your 3D models (in `.glb,.gltf,fbx, obj, sti, dae and folders,` format) into the box labeled “Paste link or drag glb…”.
   * Each time you add a model, it will be assigned a unique **Index ID** (starting from 1). In this example, the first model will have an Index ID of “1”, the second model “2”, and so on.

### Step 4: Publish the Project

1. Once all models are added, click the **Publish/Update** button.

2. Upon successful publication, a web link will be generated. You can access each indexed model individually using the following format:

   ```ruby
   https://your-project-link.swiftxr.app/?[Model Swap Parameter]=[Index ID]
   ```

   For example, if your **Model Swap Parameter** is set to “user” and the **Index ID** of the first model is “1”, your link will look like this:

   ```ruby
   https://bead-christmas.swiftxr.app/?user=1
   ```

3. To view other models, simply replace the **Index ID** with “2” or “3” to display the respective models. For instance, to view the second model:

   ```ruby
   https://bead-christmas.swiftxr.app/?user=2
   ```

#### Step 5: Embed the Project into a Website

1. After publishing your project, you can integrate it into your website. To do this, click on the **Copy Embed** button located at the top of the web address modal.
2. Paste the generated iframe embed code into your website’s HTML file, and the 3D model viewer will be displayed on your page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.swiftxr.io/components/indexable-model-viewer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.