So basically im using html click event to change the texture the texture is changing but the problem is im trying to change the texture and even if the texture is same the texture doesnt look same in the model: these are the images:
and this is the code:
function addTextureChangeEvent() {
document.querySelectorAll(‘.color-image’).forEach(img => {
img.addEventListener(‘click’, function () {
const textureUrl = this.getAttribute(‘data-texture-url’);
const part = this.closest(‘.color-selector’).getAttribute(‘data-part’);
const loader = new THREE.TextureLoader();
const texture = loader.load(textureUrl) ;
console.log(materials.frontFrame);
// texture.onUpdate = function() {
// // Ensure the texture is ready before applying
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.flipY = false;
texture.repeat.set(1, 1);
texture.encoding = THREE.sRGBEncoding;
texture.mapping = THREE.UVMapping;
texture.generateMipmaps = true;
if (part === 'frontFrame' && materials.frontFrame) {
setTimeout(()=>{
const texture1 = materials.frontFrame.map;
materials.frontFrame.map = texture;
texture1.dispose();
},1000)
} else if (part === 'lens' && materials.lens) {
materials.lens.map = texture;
materials.lens.needsUpdate = true;
} else if (part === 'temples' && materials.temples) {
materials.temples.map = texture;
materials.temples.needsUpdate = true;
}
materials.frontFrame.needsUpdate = true;
//materials.frontFrame.map = maintex;
console.log(`Applied texture from ${textureUrl} to ${part}`);
});
});
};