How to Set up VariationConfiguratorPlugin

In this tutorial, we will cover different flows to set up the VariationConfiguratorPlugin:

Accessing the Plugin in the Editor

1. Open the Editor.
2. Go to the Configurators tab.
3. Select Configurator from the right panel.

You can then choose one of these flows to set up the plugin:

Plugin Hierarchy

The VariationConfiguratorPlugin follows a specific file hierarchy to organize and access the models and materials efficiently. This hierarchy consists of two main folders:

1. objects: This folder contains all the 3D object variations organized into subfolders. Each subfolder represents a group of related variations. The subfolders' names should be descriptive of the group they represent, making it easier to identify and manage variations in the configurator.
2. materials: This folder contains all the materials for the 3D object variations, also organized into subfolders. Similar to the objects folder, each subfolder in materials represents a group of related material variations.

configurator
- config.json
- objects
- - Basket
- - - circle.glb
- - - square.glb
- - Ring
- - - ....
- materials
- - Metal
- - - red.pmat
- - - gold.pmat
- - Diamond
- - - blue.dmat
- - - white.dmat

By maintaining this folder hierarchy, the VariationConfiguratorPlugin can easily load and apply variations based on their group and type (object or material). This structure ensures a more efficient and manageable way of handling variations in your configurator projects.

Setup Using Absolute URLs

1. Make sure all models are uploaded to a remote server.
2. Click Add objects group (empty) for objects or materials.
3. Type a name for the group and click OK.
4. Open the new group and click add item (url).
5. Paste the URL of the model you want to load.
6. Apply and test the model to the configurator using the panel that appears on the left side of the editor.
7. Repeat the steps to add more models and groups to the configurator, for both materials and objects.
8. Once finished, click Download JSON/Zip to download the config.json file.

note

For material groups, The name of the group should match the name of the material applied to the object. To check the name, click on the object in the editor, then go to Picking tab and scroll down to the Material section, there you can find the name of the material applied to the selected object.

info

To Edit the config.json by adding or deleting models, you can do it by following these steps:

1. Open the Editor
2. Go to Configurators tab.
3. Select Configurator from the right panel.
4. Here Click Load JSON/zip button and upload the config.json file.
5. Add or delete models and groups.
6. Click Download JSON/zip button to download the updated config.json file.
7. Upload the updated config.json file to your remote server.

Setup Using Local Files and Exporting a Zip File

1. Separate the models into different files, with each object and material in a different file.
2. Organize the models into groups, with each group represented by a folder that contains all the models for that group.
3. Click Add objects group (local folder) for objects or materials.
4. Select the folder containing the models.
5. Type a name for the group and click OK.
6. Apply and test the models from the right-side panel.
7. Repeat the steps to add more models and groups to the configurator, for both materials and objects.
8. Once finished, click Download JSON/Zip to download a zip file containing the config.json and all models organized in the same structure as in the Configurator.

info

To Edit the config.json by adding or deleting models, you can do it by following these steps:

1. Add the model file to the specified group (folder) in your remote server.
2. Open the Editor
3. Go to Configurators tab.
4. Select Configurator from the right panel.
5. Here Click Import Path button and paste the url of the config.json.
6. Navigate in the configurator hierarchy and add an item to the same group you added to in your remote server by clickin add item (url) button.
7. just type the name of the file such as model.gltf and click OK.
8. The item will be added to the group.
9. Click Download JSON/Zip button, this time it will download the updated config.json file.
10. Upload the updated config.json file to your remote server.

Setup baseURL and Folder Hierarchy

1. Organize your models and materials into groups. Create two folders, "objects" and "materials." Inside each folder, create subfolders that represent the groups. Each subfolder should contain the models or materials for that group.
2. Upload the folder hierarchy to your remote server, such as Amazon S3, preserving the structure.
3. Click Add objects group (empty) for objects or materials.
4. Type a name for the group and click OK.
5. Open the new group and click add item (url).
6. Instead of pasting the full URL, just enter the name of the model or material you want to load (e.g., model.gltf).
7. Apply and test the model to the configurator using the panel that appears on the left side of the editor.
8. Repeat the steps to add more models and groups to the configurator, for both materials and objects.
9. Once finished, click Download JSON/Zip to download the config.json file.

info

To Edit the config.json by adding or deleting models, you can do it by following these steps:

• Add the model file to the specified group (folder) in your remote server.
• Open the Editor
• Go to Configurators tab.
• Select Configurator from the right panel.
• Here Click Import Path button and paste the url of the config.json.
• Navigate in the configurator hierarchy and add an item to the same group you added to in your remote server by clickin add item (url) button.
• just type the name of the file such as model.gltf and click OK.
• The item will be added to the group.
• Click Download JSON/Zip button, this time it will download the updated config.json file.
• Upload the updated config.json file to your remote server.

Adding config.json to Your Project and Accessing Variations

1. Upload the config.json file (or the contents of the zip file from flow 3) to your remote server.
2. In your code, add the VariationConfiguratorPlugin and pass the config.json URL to the importPath method:

const config = await viewer.addPlugin(VariationConfiguratorPlugin);
await config.importPath("https://your-server.com/config.json");

3. Then you can access all the variations and apply them like this:

const category = config.variations.objects[0]
config.applyVariation(category , 0 , 'objects' );

'category' is the group you added to the configurator. Here we are accessing the first group in the objects array.

• applyVariation takes a group as first parameter.
• Second parameter is the index of the model you want to apply.
• Third parameter is the type of the group, either objects or materials.