I am attempting to change the textures and colors of an object when clicking on separate cubes. I have encountered a challenge where I can only change the color of the object once, even when using a for-loop, and only if there are no previous textures or colors applied to the object. However, if the object already has a color, I am unable to change it. Do I need to include some 'needsUpdate' statement? I tried doing so but without success. Please review my onclick function.
EventsControls.attachEvent('onclick', function() {
var colors = ['White', 'blue', 'gold'];
for (var i = 0; i < colors.length; i++) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
if (child.material.name == "Sofa_Leather") {
child.material = colors[i];
child.material.needsUpdate = true;
child.material.buffersNeedUpdate = true;
child.material.uvsNeedUpdate = true;
child.receiveShadow = true;
}
}
})
}
});
Please point out any errors in my approach. Thank you.
// Tried again with the below code, however, I was still only able to change one color. I suspect I may be using the 'needsUpdate' incorrectly.
var index = 0;
var colors = [0xfffeef, 0xffff00, 0x000fff];
object.traverse( function(child) {
if (child instanceof THREE.Mesh) {
if (child.material.name == "Sofa_Leather") {
if(index == colors.length) index = 0;
child.material.color.setHex(colors[index++]);
child.material.needsUpdate = true;
child.receiveShadow = true;
}
}
})