title: How to add faces to THREE.BufferGeometry?
body: <p>I have created programmatically a simple mesh:</p>
  
  <pre><code>var CreateSimpleMesh = new function () {
      var xy = [],
          maxX = 7,
          maxY = 10,
          river = [[0, 5], [0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 1], [6, 0]],
          grassGeometry = new THREE.BufferGeometry(),
          grassVertexPositions = []
  
      this.init = function () {
          for (i = 0; i &lt; maxX; i++) {
              for (j = 0; j &lt; maxY; j++) {
                  xy.push([i, j])
              }
          }
  
          for (var i = 0; i &lt; xy.length; i++) {
              grassVertexPositions.push([xy[i][0], xy[i][1], 0])
              grassVertexPositions.push([xy[i][0] + 1, xy[i][1], 0])
              grassVertexPositions.push([xy[i][0], xy[i][1] + 1, 0])
  
              grassVertexPositions.push([xy[i][0] + 1, xy[i][1] + 1, 0])
              grassVertexPositions.push([xy[i][0], xy[i][1] + 1, 0])
              grassVertexPositions.push([xy[i][0] + 1, xy[i][1], 0])
          }
  
          for (var i = 0; i &lt; grassVertexPositions.length; i++) {
              for (var j = 0; j &lt; river.length; j++) {
                  if (river[j][0] == grassVertexPositions[i][0] &amp;&amp; river[j][1] == grassVertexPositions[i][1]) {
                      grassVertexPositions[i][2] = -0.5
                  }
              }
          }
  
          var grassVertices = new Float32Array(grassVertexPositions.length * 3)
  
          for (var i = 0; i &lt; grassVertexPositions.length; i++) {
              grassVertices[i * 3 + 0] = grassVertexPositions[i][0];
              grassVertices[i * 3 + 1] = grassVertexPositions[i][1];
              grassVertices[i * 3 + 2] = grassVertexPositions[i][2];
          }
  
          grassGeometry.addAttribute('position', new THREE.BufferAttribute(grassVertices, 3))
  
      var grassMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00}),
          grassMesh = new THREE.Mesh(grassGeometry, grassMaterial)
  
          grassMesh.rotation.x = -Math.PI / 2
          Test.getScene().add(grassMesh);
      }
  }
  </code></pre>
  
  <p>Problem is that this mesh has only vertices. I have tried to add to it faces like in <a href="https://stackoverflow.com/questions/15795348/generate-mesh-faces-for-vertices-in-three-js">this</a> question using THREE.Shape.Utils.triangulateShape but BufferGeometry is different than normal geometry and it does not work. Is it possible to add faces to BufferGeometry?</p>
  
  <p>EDIT:
  <a href="http://jsfiddle.net/grz671u9/" rel="noreferrer">Working fiddle</a></p>