SwiftXR Documentation
Get StartedGitHubCommunity
  • 👉 Introduction
  • 🍭 Creating a Project
  • 🧭 Navigate the Interface
    • Left Panel
      • Layers Panel
      • File Manager (Files)
      • Project Settings
      • Video Tutorials
    • Working Area
  • 🎨 Templates
    • 3D
    • Augmented Reality
    • Virtual Reality
    • Face Tracking
    • Image Tracking
  • 🗃️ Components
    • 3D Viewer
      • Actions
      • Postion
      • Size
      • Layout
      • Background
        • Background Image
      • Effects
    • Augmented Reality (AR)
      • Properties (AR)
    • Virtual Reality (VR)
      • Properties (VR)
      • VR Editor
    • 3D Carousel
      • Carousel Options
    • Image Tracking
      • Image Tracking
    • Face Tracking
      • Face Tracking
      • Face Tracking Editor
    • Customizable 3D Viewer
      • Customization Options
      • Variants
    • 3D Text
      • 3D text
      • Generate 3D Text
    • Indexable 3D Viewer (Developers)
      • Indexing Options
    • AR Artwork Viewer
      • Artwork Settings
    • AI Artwork Viewer
      • AI Artwork
      • AI Generator
    • ReadyPlayerMe
      • Avatar Settings
  • 🔌 Plugins
    • WiX
    • Squarespace
    • Shopify
    • WordPress
    • WooCommerce
    • Framer
    • Webflow
    • GoDaddy
    • Zoho
    • Blender
      • Version 4.1 or Below
      • Version 4.2 or Above
    • Canva
    • Figma
    • HubSpot CMS
    • Clo3d
    • Style3d
    • Daz3d
    • Weebly
    • Concrete CMS
    • Dorik
    • Format
    • UCraft
    • Brizy
    • Bubble
    • Tinkercad
  • 🪢 Integrations
    • HTML
    • React and Next.js
    • Svelte
    • Angular
    • Vue
    • Swift
  • 🎮 3D Content Creation
    • 3D Modelling Softwares
      • Blender
      • Maya
      • Sketchup
    • 3D Asset Stores
      • Sketchfab
      • Free 3D
    • 3D Scanning/Capture
      • Luma AI
      • Kiri Engine
  • 💡 How To
    • Image Tracking
    • Best Practices For Image Tracking on SwiftXR
    • Face Tracking
    • Indexable Model Viewer
    • How to Enable Animation in AR on IOS Devices
Powered by GitBook
On this page
  • Step 1: Access the Indexable Model Viewer (IMV)
  • Step 2: Set Up Indexing and Model Swap Parameters
  • Step 3: Add Your 3D Models
  • Step 4: Publish the Project

Was this helpful?

  1. 💡 How To

Indexable Model Viewer

PreviousFace TrackingNextHow to Enable Animation in AR on IOS Devices

Last updated 6 months ago

Was this helpful?

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.

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. Assign model IDs and a Model Swap Parameter.

  2. Publish the project with a URL to view each model.

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

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.

Step 3: Add Your 3D Models

  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:

    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:

    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:

    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.

Go to and select .

Add models to the canvas.
3D Viewer Components
Indexable Model Viewer (IMV)