title: How to change one texture image of a 3d model(maya ) in three.js at runtime
body: <p><a href="http://freeeggsinbasket.com/tahmid/3d/index.html" rel="nofollow noreferrer">This site</a> is loading a maya model using three.js.
  This model has Below texture pictures</p>
  
  <p><img src="https://i.stack.imgur.com/Srn6p.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/QV1EK.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/paQcz.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/cyk37.jpg" alt="enter image description here"></p>
  
  <p>Here is the JS</p>
  
  <pre><code> 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 &lt; 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();
   });
  </code></pre>
  
  <p>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?</p>