title: ThreeJS r71 - PlaneBufferGeometry Vertex UV
body: <p>I have a function that creates a simple <code>THREE.PlaneGeometry</code> and using an image texture material maps a piece of the image onto the plane. What I am trying to figure out is how to convert this logic from using a <code>THREE.PlaneGeometry</code> to a <code>THREE.PlaneBufferGeometry</code>, but I cannot figure out how to access the vertices &amp; alter in the same way.</p>
  
  <p>I apologize if this is a repeat question. I did search around &amp; if one existed, I could not find it.</p>
  
  <p>Here is the function &amp; below it is a sample call for it:</p>
  
  <pre><code>/**
   * options:
   *  imageSize: { w: #, h: # } - size of the source image
   *  planeSize: { w: #, h:# } - size of the actual plane to create
   *  position: { x: #, y:#, z: # } - position of the next plane
   *  material: material - the material to apply
   *  clipRect: { x: #, y:#, w: #, h:# } - the part of the image to clip
   *      x and y from the bottom left of the image.
   *      w and h width and height of the image region,
   *   name: name of the mesh
   */
  function createPlane( opts ) {
  
      var i, faces, v, vertexes, point, p,
          plane = new THREE.PlaneGeometry( opts.planeSize.w, opts.planeSize.h, 1, 1 ),
          mesh = new THREE.Mesh(plane, opts.material),
          imgRect = {
              x: opts.clipRect.x / opts.imageSize.w,
              y: opts.clipRect.y / opts.imageSize.h,
              w: opts.clipRect.w / opts.imageSize.w,
              h: opts.clipRect.h / opts.imageSize.h
          };
  
      if (opts.name !== '') {
          mesh.name = opts.name;
      }
  
      if (opts.position !== null) {
          mesh.position.set(
              opts.position.x,
              opts.position.y,
              opts.position.z
          );
      }
  
      for( i = 0; i &lt; plane.faceVertexUvs.length; i++) {
          faces = plane.faceVertexUvs[i];
          for( v = 0; v &lt; faces.length; v++) {
              vertexes = faces[v];
              for( p = 0; p &lt; vertexes.length; p ++ ) {
                  point = vertexes[p];
                  point.x = imgRect.x + ( point.x * imgRect.w );
                  point.y = imgRect.y + ( point.y * imgRect.h );
              }
          }
      }
      return mesh;
  }
  </code></pre>
  
  <p>Here is a sample call:</p>
  
  <pre><code>var plane = createPlane({
          imageSize: { w: 1024, h: 1024},
          planeSize: { w: 23, h: 31 },
          position: null,
          material: new THREE.MeshBasicMaterial({
              map: myTexture, // defined elsewhere
              transparent: true
          }),
          name: 'myPlane',
          clipRect: { x: 958, y: 226, w: 23, h: 31 }
      });
  </code></pre>