javascript - Texture update in three.js -


in three.js project try change color texture clicking on image.

here goes code:

...  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 ) } );   ... 

what tried until defined variable col should contain path of color textures. , clicking on image3 new color texture should visible on geometry. unfortunately doesn´t work. after research found thread: three.js texture / image update @ runtime

and think have add update texture: textures.color.needsupdate=true;

but when add code like:

 document.getelementbyid('image3').onclick = function() {      col=("textures/synleder/synleder_col.png");     textures.color.needsupdate=true;     }; 

my geometry disappears. have clue did wrong?

many thanks!

document.getelementbyid('image3').onclick = function() {    textures.color = three.imageutils.loadtexture("textures/synleder/synleder_col.png",function(){     material2.color = textures.color;     textures.color.wraps = textures.color.wrapt = three.repeatwrapping;     textures.color.repeat.set( 2, 2);     textures.color.needsupdate=true;   }); }; 

this should it


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -