Change Materials On Individual Parts Using Variants

[WadeMorrison]

Hello!

I have a basic configurator that I'm working on to display furniture products that my company offers. Right now I am using the "Variants Extension" and it works great!

Here is a WIP of what I have so far: Rios Chest

However, if I wanted to have a secondary option to change just the "Drawer Face" material, how would I go about doing that? Since right now, the variant extension changes everything as a whole (the specified parts anyways). I really like what R2U showcased using model-viewer, and am trying to replicate something like that where they are able to change the fabric and wood individually.

[ghost]

Simply put the model needs to be authored so that the drawer face has its own material, then you can have a variant for that material with all the different selections. The model in the example you cite has at least 2 materials with their own set of variants.

[WadeMorrison]

@timmmeh Ah, okay that makes sense then! I'll try that out and see how it goes, thank you for the help!

[WadeMorrison]

@timmmeh Hello!

So I went ahead and created another product that now has two separate materials. I am able to adjust each one individually as well! However, whenever I go to click on a different "Wood" material, the model will revert the "Lacquer" color to it's default color. And vice versa. It also seems like the color will not change now unless I select it first, then click on the model-viewer "window". Where as previously once I clicked on the material it would automatically apply that material.

The model isn't optimized fully as I'm still trying to make a good template for the other products we sell. So loading time take's a little while, sorry! But here is another WIP of what I have so far if you'd like to dig around and see what I may be doing wrong: Cash Credenza

Again, thank you for the help you've already offered, it is much appreciated as I'm still relatively new to programming!

[WadeMorrison]

I have no idea what that means haha, I am so sorry. I'm just using the copy/paste HTML code from the model-viewer website. And then editing it from there to fit my needs. Slowly but surely anyways. If wanted, I could share my files with you so you can dig around? Not sure if that would help or not.

[ghost]

The good news is the file looks like it's correct I can switch to each variant, changing color does not change the wood and vice versa, so yeah I'd say the issue is probably in the script you are using to do the switching.

[WadeMorrison]

Ah okay, that is good news then! And well, I will continue to work on it then and see what I can come up with. I just tried throwing it up on glitch and used the default variant example and it still reverts back to the default color of lacquer once I choose a different wood material and vise versa. Is it working on your side because you're using an experimental version? Or was this working for you on the current version?

[elalish]

It sounds like you may be trying to use pre-release features. You can test the latest by using this: https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js instead of unpkg. Only for testing! This gets updated every time we merge a PR, so it's not for production. We'll have a new release out soon with all our latest features.

[ghost]

Thanks @elalish, I was going to suggest that too I think this may be an actual model-viewer bug that is fixed in pre-release.

[WadeMorrison]

Good morning! Thank you both for the help, and very responsive! I will go ahead and try the testing version out. As I'm the only 3D artist at this company, and programming is a whole new world to me I'm glad to know I was headed at least in the right direction some what haha.

Do you have any clues as to when another release of model-viewer will be by chance?

[elalish]

MV only supports changing materials, not splitting or combining them on meshes. That gets pretty complicated and it's better to have a full authoring tool like Blender for those workflows. Basically you want to author it with separate materials for each part you want changeable in MV afterward.

[WadeMorrison]

Alright, that's what I figured too. The configurator program my company uses now lets us pull in a material from a material database by an external identifier/specific name, it's all programmed through JSON to decide which material can go to which mesh, but they require .OBJ models. So I wasn't sure if MV could achieve the same thing using an external material library that I create. But assumed it would be pretty complicated for the current version of MV and I don't have great knowledge on "hacking" my way down to the three.js layer and I don't want to risk my app breaking with a new release haha.

Thank you for the clarification!

[ghost]

Thanks for the info, very interesting!
You can always change material properties and textures directly as in the examples no need to touch three.js, but you would still have to provide the code layer that reads from your internal database to fetch the texture and material setting and then apply those changes to a model in ModelViewer also you would need a unique material for each switchable part on the model, same as with variants.

[WadeMorrison]

You're welcome! I hope you don't mean interesting in a bad way haha, I've taught most of this myself through tutorials and picking apart various models/programs so if I am doing something wrong please do tell! I'm actually trying to convert my static page into a MERN stack currently which is kinda fun to make it more dynamic for the various models I have, but I've hit many bumps so far haha. Thank you for the help and clarifying on how to possibly do an internal database!

I will have to look more into the internal database fetch and see if I can figure it out somehow. This would just be easier for me down the road in case I have to edit a material or even add more selection(s) to the model(s). Then I won't have to open up the affected GLTF(s), edit it, then re-export them out. But, so far the current method is working great as is!

[ghost]

Haha, no no, interesting as in its good to get a sense of the state of asset-pipelines out there and what is working and not working.
It sounds like your right on track 👍