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