如何在运行时更改three.js中的三维模型（maya）的一个纹理图像 [英] How to change one texture image of a 3d model(maya ) in three.js at runtime

问题描述

此网站正在使用three.js加载maya模型。
此型号有纹理图片

This site is loading a maya model using three.js. This model has Below texture pictures

这是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();
 });

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

now i want to change the 1st texture picture to some other texture and rest of the texture remains same on runtime! how to do it?

推荐答案

如果您想在运行时更改纹理。您需要做的就是查看zmesh对象材质。找到蓝色服装材料的适当索引并将其换出。你的模型有点棘手，因为你有一系列材料，但无论如何。对于单个材质对象，您只需更改 mesh.material.map 并更新它，在您需要的情况下我们需要 mesh.material.materials [index] .MAP 。因此，请尝试将其添加到 createScene 函数的底部。它将用眼球纹理取代连衣裙：

if you'd like to change the texture at runtime. All you need to do is look at the zmesh objects material. Find the appropriate index of the blue dress material and swap it out. Your model is a little tricky in that you have an array of materials but no matter. For a single material object you simply change the mesh.material.map and update it, in your case we need mesh.material.materials[index].map. So try adding this to the bottom of your createScene function. It will replace the dress with the eyeball texture:

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

当然，将'c006_10.jpg'替换为眼球纹理的相应路径。一个补充说明，如果您将纹理交换连接到 onclick ，例如，您将需要一个活动的渲染循环或调用渲染器的渲染功能来显示它。

Of course, replace 'c006_10.jpg' with the appropriate path to your eyeball texture. One added Note, if you hook up the texture swap to an onclick for example you'll want to have an active render loop or call renderer's render function to get it to display.

这篇关于如何在运行时更改three.js中的三维模型（maya）的一个纹理图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！