Creating a Custom UI Configurator Plugin

Creating a custom plugin is the best way to access the viewer and the VariationConfiguratorPlugin's data and create custom UI. to learn more about custom plugin check Custom Plugins.

First you have to get the plugin from the viewer,and then you can access the data and create your custom UI.

const config = viewer.getPlugin(VariationConfiguratorPlugin)!;

To access the configuration data, you can use the config.variations property.

const variations = config.variations

The variations property is an object that contains two arrays, objects and materials.

const objects = variations.objects;
const materials = variations.materials;

Each array contains objects that represent the variations of the objects and materials in the scene.

const object = objects[0];
const material = materials[0];

Each object or material is of type IConfiguratorVariation and contains the following properties:

IConfiguratorVariation {
   name: string;
   prefix: string;
   title: string;
   icon: string;
   icons: string[];
   titles: string[];
   items: string[];
   itemFiles: (Blob | undefined)[];
   iconFiles: (Blob | undefined)[];
   selected?: number;
}

To apply a variation to the scene, you can use the applyVariation method.

config.applyVariation(object, 0, "objects");

First parameter is the variation object, second parameter is the index of the variation, and the third parameter is the type of the variation either "objects" or "materials".

Utility methods

You can use the methods inside the utils property to access some of the variation's properties. The most important ones are:

1. getItemTitle - returns the title of the variation item.
2. getItemIcon - returns the icon of the variation item.
3. getTitle - returns the title of the group.
4. getIcon - returns the icon of the group.

To see a full project examples check :

Code Examples

• Basic Custom Ui Plugin Example
• Basic HTML Custom Ui Example
• Custom Ui Plugin Example with React
• Advanced HTML custom Example

simple plugin example

import { AViewerPlugin, ViewerApp, VariationConfiguratorPlugin } from "webgi";

export class CustomConfiguratorUiPlugin extends AViewerPlugin<""> {
  static readonly PluginType = "CustomConfiguratorUiPlugin";
  enabled = true;

  wrapper: HTMLElement;

  constructor() {
    super();
    this.wrapper = document.querySelector(".ui")!;
  }

  async onAdded(v: ViewerApp): Promise<void> {
    await super.onAdded(v);

    const config = v.getPlugin(VariationConfiguratorPlugin)!;

    //objects
    config.variations.objects.forEach((obj) => {
      let category = document.createElement("div");
      category.innerHTML = obj.name + " ";

      for (let i = 0; i < obj.items.length; i++) {
        let item = document.createElement("button");
        item.innerHTML = obj.icons[i];

        item.addEventListener("click", () => {
          config.applyVariation(obj, i, "objects");
        });

        category.appendChild(item);
      }
      this.wrapper.appendChild(category);
    });

    //materials
    config.variations.materials.forEach((mat) => {
      let category = document.createElement("div");
      category.innerHTML = mat.name + " ";

      for (let i = 0; i < mat.items.length; i++) {
        let item = document.createElement("button");
        item.innerHTML = config.utils.getItemTitle(mat, i);
        item.style.background = `url("${config.utils.getItemIcon(mat, i, "materials")}")`;

        item.addEventListener("click", () => {
          config.applyVariation(mat, i, "materials");
        });

        category.appendChild(item);
      }
      this.wrapper.appendChild(category);
    });
  }

  async onRemove(v: ViewerApp): Promise<void> {
    this.wrapper.innerHTML = "";

    return super.onRemove(v);
  }
}

Simple HTML example with custom UI