I am currently working on a project using three.js where I am attempting to change the color texture by clicking on an image.
Below is the code I have been using:
...
var col;
document.getElementById('image3').onclick = function() {
col=("textures/synleder/synleder_COL.png");
};
var textures = {
color: THREE.ImageUtils.loadTexture(col),
normal: THREE.ImageUtils.loadTexture('textures/synleder/synleder_NRM.jpg'),
specular: THREE.ImageUtils.loadTexture('textures/synleder/synleder_SPEC.jpg'),
};
textures.color.wrapS = textures.color.wrapT = THREE.RepeatWrapping;
textures.color.repeat.set( 2, 2);
textures.normal.wrapS = textures.normal.wrapT = THREE.RepeatWrapping;
textures.normal.repeat.set( 2, 2);
textures.specular.wrapS = textures.specular.wrapT = THREE.RepeatWrapping;
textures.specular.repeat.set( 2, 2);
var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].value = textures.normal;
uniforms[ "uNormalScale" ].value.y = 2;
var material2 = new THREE.MeshPhongMaterial( {
map: textures.color,
specularMap: textures.specular,
normalMap: uniforms[ "tNormal" ].value,
normalScale: uniforms[ "uNormalScale" ].value,
} );
loader = new THREE.JSONLoader( true );
document.body.appendChild( loader.statusDomElement );
loader.load( "geo/kugel5.js", function( geometry ) { createScene( geometry, scale, material2 ) } );
...
So far, I have tried defining a variable col to store the path of my color textures. When clicking on image3, I expected the new color texture to be applied to my geometry. However, this functionality is not working as expected. During my research, I came across this thread: Three.js texture / image update at runtime
I believe I need to add something to update the texture: textures.color.needsUpdate=true;
When I attempted to add this to my code like so:
document.getElementById('image3').onclick = function() {
col=("textures/synleder/synleder_COL.png");
textures.color.needsUpdate=true;
};
my geometry disappears. Can someone please advise on what I might be doing wrong?
Thank you in advance!