title: Three.js - Updating texture on plane
body: <p>I'm trying to make a terrain editor. So I have a plane with multiple materials on it, which I initialize like so:</p>
  
  <pre><code>var materials = [];
  var grasstexture = THREE.ImageUtils.loadTexture('Img/grass.png', {}, function() { });
  var rocktexture = THREE.ImageUtils.loadTexture('Img/rock.png', {}, function() { });
  materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: grasstexture}));
  materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: rocktexture}));
  // Plane
  
  this.geometry.materials = materials;
  for(var i = 0; i &lt;  this.geometry.faces.length; i++)
  {
      this.geometry.faces[i].materialIndex = 0;
  }
  
  this.geometry.dynamic = true;
  this.mesh = new THREE.Mesh( this.geometry, new THREE.MeshFaceMaterial(  ) );
  this.mesh.receiveShadow = true;
  </code></pre>
  
  <p>The result is a square plane stripped with the two textures. </p>
  
  <p>Now, I can't seem to update the materialIndex for each vertex during the runtime. I have tried:</p>
  
  <pre><code>face.materialIndex = 1;
  
  for(var i = 0; i &lt; geo.materials.length; i++){
      geo.materials[i].needsUpdate = true;
  }
  
  for(var i = 0; i &lt;  this.geometry.faces.length; i++)
  {
      geo.faces[i].materialIndex = 0;
  }
  
  for(var i = 0; i &lt; geo.materials.length; i++){
      geo.materials[i].needsUpdate = true;
  }
  this.mesh.needsUpdate = true;
  this.mesh.material.needsUpdate = true;
  
  geo.verticesNeedUpdate = true;
  geo.normalsNeedUpdate = true;
  geo.colorsNeedUpdate = true;
  
  geo.computeFaceNormals();
  geo.computeVertexNormals();
  
  geo.computeCentroids();
  geo.computeTangents() ;
  </code></pre>
  
  <p>And every other 'materialIndex' and 'needsUpdate' variable in Three.js I was able to find, but still nothing happens. How do I force an update on the material indices?</p>