Currently working on a Webgl 3D project, the task at hand is to dynamically change the textures of a loaded COLLADA object by clicking on buttons associated with each texture.
Up until now, I've successfully achieved this with three textures by duplicating the same code thrice. However, this approach raises the following question:
How can I streamline the process by using a single event listener to handle changes for any number of textures I may have?
***** MY EXISTING CODE BELOW FUNCTIONS CORRECTLY *****
Below are snippets of my code:
<button type="submit" id="wd1" onclick="setMat1()" ><img src='tex/wd1.png'/></button>
<button type="submit" id="wd2" onclick="setMat2()"><img src='tex/wd3.png'/></button>
<button type="submit" id="wd3" onclick="setMat3()"><img src='tex/wd2.png'/></button>And
function setMat1 () {
elf.traverse(function(child) {
if (child instanceof THREE.Mesh){
var mat1 = textureLoader.load('obj/tex/wood3.png');
child.material.map = mat1;
}
elf.needsUpdate=true;
});
}
function setMat2 () {
elf.traverse(function(child) {
if (child instanceof THREE.Mesh){
var mat2 = textureLoader.load('obj/tex/wood5.png');
child.material.map = mat2;
}
elf.needsUpdate=true;
});
}
function setMat3 () {
elf.traverse(function(child) {
if (child instanceof THREE.Mesh){
var mat3 = textureLoader.load('obj/tex/wood4.png');
child.material.map = mat3;
}
elf.needsUpdate=true;
});
}I decided to post this query here as I plan to incorporate at least 20 additional textures, and implementing them in the manner I currently have doesn't seem like the most efficient solution :)