0

该站点正在使用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();
 });

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

4

1 回答 1

1

如果您想在运行时更改纹理。您需要做的就是查看 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示例，您将希望有一个活动的渲染循环或调用渲染器的渲染函数以使其显示。

于 2013-09-09T15:10:05.317 回答