Skip to main content

Material Configurators

WebGi has a MaterialConfiguratorPlugin that makes it easy to create custom material configurators. A configuration can be created with our sandbox editor and configuration saved in the glb/gltf files. This configuration can be loaded in a viewer by just adding the MaterialConfiguratorPlugin to the viewer:

await viewer.addPlugin(MaterialConfiguratorPlugin);

This plugin would create a simple UI like this example:

Custom Configurator UI.

To create a custom UI, it's possible to use the same settings in the gltf files. For this, we have to create a custom plugin inheriting the MaterialConfiguratorBasePlugin. Check the sample code below. Custom UI can be created in JS following that is passed to the function.

class CustomMaterialConfiguratorPlugin extends MaterialConfiguratorBasePlugin{  

// This must be set to exactly this.
public static PluginType = 'MaterialConfiguratorPlugin'

// this function is automatically called when an object is loaded with some material variations
protected async _refreshUi(): Promise<boolean> {
if (!await super._refreshUi()) return false // check if any data is changed.

for (const variation of this.variations) {
console.log(variation.title)

variation.materials.map(material => {
// material is the variation that can be applied to an object

let image: any
if (!variation.preview.startsWith('generate:')) {
const pp = (material as any)[variation.preview] || '#ff00ff'
image = pp.image || pp
} else {
// Generate a small snapshot of the material preview based on some shape (optional)
image = this._previewGenerator!.generate(material, variation.preview.split(':')[1] as any)
}
// callback to change the material variations
const onClick = ()=>{
this.applyVariation(variation, material.uuid)
}
// Generate a UI from this data.
console.log({uid: material.uuid, color: (material as any).color, material: material, image, onClick})
}) }
return true
}
}

TODO: add codepen with custom UI