title: WebGL / Three.js Different materials on one complex object (grid)
body: <p>In order to increase performance i render grid to one THREE.Geometry() object in such loop: </p>
  
  <pre><code>build : function(){    // simplified
  
    square = new THREE.Geometry();
    face = 0;
  
    for( r = 0; r &lt; this["rows"]; r++)
     for( c = 0; c &lt; this["cols"]; c++)
  
         // creates square
         square.vertices.push(new THREE.Vector3( x,  y, z));
         square.vertices.push(new THREE.Vector3( x + w, y, z));
         square.vertices.push(new THREE.Vector3( x + w, y - h, z));
         square.vertices.push(new THREE.Vector3( x, y - h, z));
  
         square.faces.push(new THREE.Face4(face + 0, face + 1, face + 2, face + 3));
  
         face+=4;
    // end of loops 
  
  
    // This adds material to the whole grid.
    // How to do it to each individual square?
  
    squareMaterial = new THREE.MeshBasicMaterial({
          color:"white",
          side:THREE.DoubleSide
    });
  
    grid = new THREE.Mesh(square, squareMaterial); 
    scene.add(grid);
  </code></pre>
  
  <p>Lets say, i have a function that selects the set of vertices (one square) from the grid (mesh) how then apply color to only this set of vertices (square) ?</p>