title: How to apply textures to a custom geometry
body: <p>I'm a very green newb attempting to understand textures and geometries. The code below should render triangle and apply an image as a texture. However, I get the following error:</p>
  
  <pre><code>.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 
  </code></pre>
  
  <p>Any Ideas?</p>
  
  <pre><code>var scene = new THREE.Scene(),
      geometry = new THREE.Geometry();
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
      renderer = new THREE.WebGLRenderer();
  
  geometry.vertices.push(new THREE.Vector3(-1, -1, 0));
  geometry.vertices.push(new THREE.Vector3(-1, 1, 0));
  geometry.vertices.push(new THREE.Vector3(1, -1, 0));
  
  geometry.faces.push( new THREE.Face3(0, 2, 1)); 
  
  geometry.faceVertexUvs[ 0 ].push(
      THREE.Vector2( 0, 1),
      THREE.Vector2( 1, 1),
      THREE.Vector2( 1, 0)
  );
  
  
  geometry.computeCentroids();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  
  var material = new THREE.MeshBasicMaterial({
      //color: 0xFF0000, 
      //wireframe: true,
      map : THREE.ImageUtils.loadTexture('cheese2.231104333_std.jpg')
  });
  
  var shape = new THREE.Mesh(geometry, material);
  shape.doubleSided = true;
  shape.overdraw = true;
  
  scene.add(shape);
  
  camera.position.z = 10;
  renderer.setClearColorHex(0x00000, 1);
  renderer.setSize( window.innerWidth, window.innerHeight);
  
  renderer.render(scene, camera);
  document.body.appendChild(renderer.domElement);
  </code></pre>