three.js 中的纹理更新答案

【问题标题】：Texture update in three.jsthree.js 中的纹理更新
【发布时间】：2013-08-28 19:50:19
【问题描述】：

在我的 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 ) } );


...

到目前为止，我尝试的是定义了一个变量 col，它应该包含我的颜色纹理的路径。通过单击 image3，新的颜色纹理应该在我的几何图形上可见。不幸的是，它不起作用。经过一番研究，我发现了这个帖子：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;
    };

我的几何图形消失了。有谁知道我做错了什么？

非常感谢！

【问题讨论】：

标签： javascript three.js textures

【解决方案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;
  });
};

应该这样做

【讨论】：

感谢 Gero 的快速回答。现在几何体并没有消失，但是颜色图没有显示，所以实际上什么都没有发生。我是否必须添加第二个“textures.color.needsUpdate=true;”我的代码中的其他地方？
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);};
谢谢Gero，它工作正常！你真的帮了我很多。非常感谢。