Is it possible to use multiple material variants in one model?

[StefanOber]

Hi there,

the documentation only shows how to get the material variants of a model as an array of strings.
I was wondering if it is possible to access material variants on sub meshes.
Let's say I have a car and one set of materials for the body and one for the seats.

Thanks!

[WadeMorrison]

Hey there Stefan!

This is possible to do, however from my expertise from doing it, you have to make sure they are separate meshes that have their own material(s).

[WadeMorrison]

Yeah of course! Here is a early WIP of what I made a long time ago, I've since been going in a different direction, so I haven't touched it in a while (the model is not optimized so loading times will be a little long).

Basically it's this little JS snippet

document.body.addEventListener('click', function (event) {
  if (event.target.className === 'item') {
    modelViewer.variantName = event.target.value;
  }
}, false);

and this HTML

<div id="items">
    <button class='item' value='Ballet Pink'>Ballet Pink</button>
    <button class='item' value="Bellini Peach">Bellini Peach</button>
</div>

In short, I have buttons that have a class name as "item" with a value of the variant name. If the person selects the button of Bellini Peach, that value will then equal the variant name in the GLB and assign that color instead. Hopefully that makes sense?

[elalish]

@StefanOber I think you may just misunderstand how glTF variants work. The material variants are defined on the sub meshes, but are collected through a top-level variant name. Our API only needs to select this top-level name, as then all the sub-mesh materials are automatically updated according to the extension data in the file, which may be a complex mapping.

[StefanOber]

@elalish Thanks for clarifying! So I'm bound to one set of variants. I was just hoping there might be the possibility of a sub-grouping of variants. Basically I would like to build a configurator.

[elalish]

To have mix and match permutations, I'd recommend you author with a separate material for each thing you want to change, then update their textures manually, as in https://modelviewer.dev/examples/scenegraph/#createTexturesExample

[StefanOber]

Okay thank you. I will give that a try.