javascripthtmlmodel-viewer

How to submit multiple values on button click?


How would I go about submitting multiple values on a button 'click'? I basically have a 3D model that I am trying to switch multiple textures at once (baseColor, normal, and roughness). Reading around, I found I can use 'data-value' to be able to assign multiple paths/values to a single button, but I am unsure how to pass those individually to 'createAndApplyTexture'. I'd assume I need to use something like innerHTML instead of querySelector?

<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>


Solution

  • Just access the dataset property

    document.querySelector('#body').addEventListener('click', e => {
    console.log(e.target.value, e.target.dataset.value, e.target.dataset.value2)
    })
    <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>