Javascript 如何在运行时在three.js中更改三维模型（maya）的一个纹理图像

正在使用three.js加载maya模型。 此模型具有以下纹理图片

这是JS

 var SCREEN_WIDTH = window.innerWidth;
 var SCREEN_HEIGHT = window.innerHeight;

 var container;

 var camera, scene;
 var canvasRenderer, webglRenderer;

 var mesh, zmesh, geometry, materials;

 var windowHalfX = window.innerWidth / 2;
 var windowHalfY = window.innerHeight / 2;

 var meshes = [];

 function init() {

     container = document.createElement('div');
     document.body.appendChild(container);

     camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
     camera.position.x = 400;
     camera.position.y = 200;
     camera.position.z = 400;

     scene = new THREE.Scene();

     // LIGHTS
     var ambient = new THREE.AmbientLight(0x666666);
     scene.add(ambient);

     var directionalLight = new THREE.DirectionalLight(0xffeedd);
     directionalLight.position.set(0, 70, 100).normalize();
     scene.add(directionalLight);

     // RENDERER
     webglRenderer = new THREE.WebGLRenderer();
     webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
     webglRenderer.domElement.style.position = "relative";

     container.appendChild(webglRenderer.domElement);

     var loader = new THREE.JSONLoader(),
         callbackKey = function (geometry, materials) {
             createScene(geometry, materials, 0, 0, 0, 6)
         };
     loader.load("chameleon.js", callbackKey);

     window.addEventListener('resize', onWindowResize, false);

 }

 function createScene(geometry, materials, x, y, z, scale) {

     zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
     zmesh.position.set(x, y, z);
     zmesh.scale.set(scale, scale, scale);
     meshes.push(zmesh);
     scene.add(zmesh);
 }

 function onWindowResize() {

     windowHalfX = window.innerWidth / 2;
     windowHalfY = window.innerHeight / 2;

     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();

     webglRenderer.setSize(window.innerWidth, window.innerHeight);
 }

 function animate() {
     for (var i = 0; i < meshes.length; i++) {
         meshes[i].rotation.y += .01;
     }
     requestAnimationFrame(animate);
     render();
 }

 function render() {
     camera.lookAt(scene.position);
     webglRenderer.render(scene, camera);
 }
 $(document).ready(function () {
     init();
     animate();
 });

var SCREEN\u WIDTH=window.innerWidth；
var SCREEN_HEIGHT=window.innerHeight；
var容器；
摄像机、场景；
var画布渲染器、webglRenderer；
var网格、zmesh、几何体、材料；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
var=[]；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像机=新的三个透视摄像机（75，屏幕宽度/屏幕高度，100000）；
摄像机位置x=400；
摄像机位置y=200；
摄像机位置z=400；
场景=新的三个。场景（）；
//灯光
var环境光=新的三个环境光（0x666666）；
场景。添加（环境光）；
var方向灯=新的三个方向灯（0xffeedd）；
directionalLight.position.set（0,70,100）.normalize（）；
场景。添加（方向光）；
//渲染器
webglRenderer=new THREE.webglRenderer（）；
设置大小（屏幕宽度、屏幕高度）；
webglRenderer.doElement.style.position=“相对”；
container.appendChild（webglRenderer.doElement）；
var loader=new THREE.JSONLoader（），
回调键=函数（几何体、材质）{
CreateSecene（几何体、材质、0、0、6）
};
load（“chameleon.js”，callbackKey）；
addEventListener（'resize'，onWindowResize，false）；
}
函数createScene（几何体、材质、x、y、z、比例）{
zmesh=新的三点网格（几何体，新的三点网格面材质（材质））；
zmesh.position.set（x，y，z）；
zmesh.scale.set（scale，scale，scale）；
网格推送（zmesh）；
添加（zmesh）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
webglRenderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
对于（var i=0；i

---

现在我想将第一张纹理图片更改为其他纹理，其余纹理在运行时保持不变！如何操作？

如果要在运行时更改纹理。您所需要做的就是查看zmesh对象材质。找到蓝色连衣裙材质的适当索引并将其替换掉。你的模型有点棘手，因为你有一系列的材料，但没有关系。对于单个材质对象，您只需更改并更新

mesh.material.map

，在您的情况下，我们需要

mesh.material.materials[index].map

。因此，请尝试将其添加到

createScene

函数的底部。它将用眼球纹理替换裙子：

zmesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'c006_10.jpg' );

---

当然，用合适的眼球纹理路径替换“c006_10.jpg”。添加了一个注意事项，例如，如果将纹理交换连接到一个

onclick

，您将希望有一个活动的渲染循环或调用渲染器的渲染函数以使其显示。

loadTexture

设置纹理上的

纹理.needsUpdate

标志。调用此函数时不要自行设置。不要设置

物料。也不要设置needsUpdate

。这就建立了一个新的着色器程序。太好了，谢谢你的澄清。我要去优化我正在做的几个项目，谢谢韦斯特兰利！现在编辑答案。@Darryl_Lehmann@WestLangley就像做梦一样工作。非常感谢你。它工作得很好。有一件事我想知道。我需要一个图像变量作为纹理输入，所以我做了这个`var tempimage=new image（）；tempimage.onload=function（）{zmesh.material.materials[0].map=new THREE.Texture（tempimage）；zmesh.material.materials[0].map.needsUpdate=true；//如果我每次删除这一行都会变黑！}；tempimage.src=“Soundwave/RB_Soundwave_Norm_XY_1024.png”`它起作用了。我的编码正确吗？事实上，简单地创建一个3.Texture不会调用更新，所以您需要手动执行。如果要使用THREE.ImageUtils.loadTexture方法，则会自动处理更新调用。在ImageUtils.js文件中有一个峰值供参考。