Javascript 在three.js中进行纹理更新
在我的three.js项目中,我尝试通过单击图像来更改颜色纹理 下面是我的代码:Javascript 在three.js中进行纹理更新,javascript,three.js,textures,Javascript,Three.js,Textures,在我的three.js项目中,我尝试通过单击图像来更改颜色纹理 下面是我的代码: ... var col; document.getElementById('image3').onclick = function() { col=("textures/synleder/synleder_COL.png"); }; var textures = { color: THREE.ImageUtils.loadTexture(col), norm
...
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,新的颜色纹理应该在我的几何体上可见。不幸的是,它不起作用。
经过一些研究,我发现了以下线索:
我想我必须添加一些东西来更新纹理:textures.color.needsUpdate=true代码>
但当我将其添加到代码中时,如:
document.getElementById('image3').onclick = function() {
col=("textures/synleder/synleder_COL.png");
textures.color.needsUpdate=true;
};
我的几何学消失了。有人知道我做错了什么吗
非常感谢
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\u 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,它很好用!你帮了我很多。非常感谢你。