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
Post a Comment