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