Assigning multiple textures with one button/selection?

[WadeMorrison]

Hello!

I've had to re-work my previous configurator from having all the textures shipping with each model, to now assigning them from an external source. Reason being my company has a ton of color options that eventually made it to where the file size was getting too big to load quick enough for a good user experince.

I've got the baseColorTexture to switch on 'click', but having trouble on how to go about assigning the normal and ORM texture at the same time. (the customer won't be able to switch this individually, just the overall material.

Here is an example of what I've go thus far:

<p>Body</p>
    <div id="body">
        <button value="../Textures/ZebraWood_BaseColor.png" data-value="../Textures/WoodNorm.png" data-value2="../Textures/WoodORM.png">Zebra Wood</button>
        <button value="../Textures/AstraBlue_BaseColor.png" data-value="../Textures/LacquerNrm.png" data-value2="../Textures/LacquerORM.png">Astro Blue</button>
        <button value="../Textures/Charlotte_BaseColor.jpg" data-value="../Textures/CharlotteGrasscloth_normal.jpg" data-value2="../Textures/Charlotte_ORM.jpg">Charlotte</button>
    </div>

<script type="module">
    const modelViewerTexture1 = document.querySelector("model-viewer#helmet");
          
    modelViewerTexture1.addEventListener("load", () => {
          
    const material = modelViewerTexture1.model.materials[1];
          
    const createAndApplyTexture = async (channel, event) => {
        const texture = await modelViewerTexture1.createTexture(event.target.value);
            if (channel.includes('base') || channel.includes('metallic')) {
                    material.pbrMetallicRoughness[channel].setTexture(texture);
                } else {
                    material[channel].setTexture(texture);
                }
            }
    document.querySelector('#body').addEventListener('click', (event) => {
        createAndApplyTexture('baseColorTexture', event);
        createAndApplyTexture('normalTexture', event);
            });
          });
</script>

I'm assuming I probably need to go more of the route of innerHTML instead of querySelector in order to get the different values of the buttons?

Greatly appreciate the help!

[elalish]

No need for innerHTML, just set e.g. class="material" on each button, then your query selector can be document.querySelectorAll('.material').forEach((element) => element.addEventListener(...));

However, you also need to change your createAndApplyTexture function; it's only reading value, so you'll need to make use of data-value and data-value2 as well.

[WadeMorrison]

Alright awesome! I understand it, however, palaying around with plugging it in different ways, I'm unsure how to get the data-value/data-value2 to read... do I need an event listener 'load' for each material?

`<script type="module">
const modelViewerTexture = document.querySelectorAll('.material').forEach((element) => element.addEventListener('click', function() {
const MV = document.querySelector('model-viewer#helmet')
const material = MV.model.materials[1];

const baseColor = async (channel, event) => {
    const diffuse = await modelViewerTexture.createTexture(event.target.value);
        if (channel.includes('base')) {
        material.pbrMetallicRoughness[channel].setTexture(diffuse);
    }
}
const Norm = async (channel, event) => {
    const normal = await modelViewerTexture.createTexture(event.target.data-value);
        if (channel.includes('normal')) {
        material.pbrMetallicRoughness[channel].setTexture(normal);
    }
}
const Roughness = async (channel, event) => {
    const ORM = await modelViewerTexture.createTexture(event.target.data-value2);
        if (channel.includes('metallic')) {
        material.pbrMetallicRoughness[channel].setTexture(ORM);
    }
}

}));
</script>`

[elalish]

This is pretty far from valid JS syntax. I'd recommend you start by simplifying things a lot until you get something that doesn't throw, then slowly add in more functionality.

[WadeMorrison]

Yeah, I started learning all this for a couple months in the beginning of the year, and got a good configurator working, and then got pushed to work on other projects. Now I'm back at this again, so I'm re-learning it haha. My bad! Will do, I appreciate the help!

[WadeMorrison]

Hey so after playing around with it more, I got it to work! However, I was wondering if this is the correct way of doing it? I'm sure there's a more condensed way of doing this, so I figured I'd ask here/Stack, as well as keep playing around with it. Eventually I have to incorporate this into my MERN stack and get rid of the embedded variants. I tried using "if, else if, else" but kept getting errors.

<!-- BODY SELECTION -->
<script type="module">
const bodyMaterial = document.querySelectorAll('.bodySwap').forEach((element) => element.addEventListener('click', swapBody));
    function swapBody() {
      const MV = document.querySelector('model-viewer#helmet')
      const material = MV.model.materials[1];

        const diffuseSwap = async (channel) => {
          const diffuse = await MV.createTexture(event.target.getAttribute('value'));
            if (channel.includes('base')) 
            {
              material.pbrMetallicRoughness[channel].setTexture(diffuse);
            }
          }
              
        const normalSwap = async (channel) => {
          const normal = await MV.createTexture(event.target.getAttribute('data-value'));
            if (channel.includes('normal')) 
            {
              material[channel].setTexture(normal);
            }
          }
              
        const ORMSwap = async (channel) => {
          const ORM = await MV.createTexture(event.target.getAttribute('data-value2'));
            if (channel.includes('metallic')) 
            {
              material.pbrMetallicRoughness[channel].setTexture(ORM);
            }
          }
      diffuseSwap('baseColorTexture', event);
      normalSwap('normalTexture', event);
      ORMSwap('metallicRoughnessTexture', event);
    };
</script>

[elalish]

I'd probably just make swap = async (channel, url) so you can skip the ifs. Then do

swap('baseColorTexture', event.target.getAttribute('value'));
swap('normalTexture', event.target.getAttribute('data-value2'));
...

Also, if you define swap outside of the function body, it won't have to recompile every time.

[WadeMorrison]

Alright, I think I follow what you're saying. I'll keeping messing around with it with what you suggested! Thank you!