title: Error while applying texture in threejs: "Cannot read property 'x' of undefined"
body: <p>I'm trying to map a texture onto a square in threejs.</p>
  
  <p>Here's my code (coffeescript)</p>
  
  <pre><code>texture = new THREE.ImageUtils.loadTexture "my/texture/file.jpg"
  
  myMaterial = new THREE.MeshBasicMaterial
    map:texture
    side:THREE.DoubleSide
  
  squareGeometry = new THREE.Geometry();
  squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0));
  squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0));
  squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));
  squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
  squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
  squareGeometry.faces.push(new THREE.Face3(2, 3, 0));
  
  myMesh = new THREE.Mesh(squareGeometry, myMaterial);
  myMesh.position.set(1.5, 0.0, 4.0);
  scene.add(myMesh);
  </code></pre>
  
  <p>When I render this in a <code>CanvasRenderer</code> I get</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'x' of undefined 
  </code></pre>
  
  <p>If I try a <code>WebGLRenderer</code> I get</p>
  
  <pre><code>[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 
  </code></pre>
  
  <p>There's a live version of the code <a href="http://cdpn.io/xneIl" rel="nofollow">here</a>.</p>
  
  <p>Does anyone know what I'm doing wrong?</p>