Texture update in three.js

Question

In my three.js project I try to change the color texture by clicking on an image.

Here goes my 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 I tried until now is that I defined a variable col which should contain the path of my color textures. And by clicking on image3 the new color texture should be visible on my geometry. Unfortunately it doesn´t work. After some research I found this thread: Three.js texture / image update at runtime

and I think I have to add something to update the texture: textures.color.needsUpdate=true;

But when I add this to my code like:

 document.getElementById('image3').onclick = function() { 
    col=("textures/synleder/synleder_COL.png");
    textures.color.needsUpdate=true;
    };

my geometry disappears. Does anyone have a clue what I did wrong?

Many thanks!

Gero3 · Accepted Answer · 2013-08-26T12:54:29.213

1

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 do it

edited Aug 26 '13 at 12:54

answered Aug 26 '13 at 10:48

Gero3

2,817
1
22
21

thank you Gero for your quick answer. Now the geometry does not disappear, but the color map is not displayed, so in fact nothing habppens. Do I have to add a second "textures.color.needsUpdate=true;" somewhere else in my code? – user2524500 Aug 26 '13 at 12:02
document.getElementById('image3').onclick = function() { textures.color = THREE.ImageUtils.loadTexture("textures/synleder/synleder_COL.png",function(){ textures.color.needsUpdate=true; }); material2.map = textures.color;textures.color.wrapS = textures.color.wrapT = THREE.RepeatWrapping; textures.color.repeat.set( 2, 2);}; – Gero3 Aug 26 '13 at 12:23
Thank you Gero, it works fine! You helped me really a lot. Thank you very much. – user2524500 Aug 26 '13 at 13:35

Texture update in three.js

1 Answers1