Обновление текстуры в three.js

Question

В моем проекте three.js я пытаюсь изменить цветную текстуру, нажав на изображение.

Вот идет мой код:

... 

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


... 

, что я пытался до сих пор является то, что я определил переменные седловины, который должен содержать путь моих цветных текстур. И, щелкнув по изображению3, новая текстура цвета должна быть видна на моей геометрии. К сожалению, он не работает. После некоторых исследований я нашел эту тему: Three.js texture/image update at runtime

, и я думаю, что я должен добавить что-то обновить текстуру: textures.color.needsUpdate=true;

Но когда я добавить это в мой код, как:

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

мой геометрия исчезает. Кто-нибудь знает, что я сделал неправильно?

Большое спасибо!

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

Это должно сделать это