Indexable Model Viewer
Last updated
Was this helpful?
Last updated
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:
Assign model IDs and a Model Swap Parameter.
Publish the project with a URL to view each model.
Integrate the project into a website using iframe.
In the SwiftXR platform, navigate to the Design Components.
Go to 3D Viewer Components and select Indexable Model Viewer (IMV).
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.
On the right-hand side, click the PROPERTIES tab.
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.
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.
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.
To add your models, click the Add Entry button.
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.
Once all models are added, click the Publish/Update button.
Upon successful publication, a web link will be generated. You can access each indexed model individually using the following format:
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:
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:
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.
Paste the generated iframe embed code into your website’s HTML file, and the 3D model viewer will be displayed on your page.
