title: Shading on PlaneBufferGeometry in Three.JS
body: <p>I'm generating a random plane that animates movement in the vertices to give a crystalline effect. When I use regular <code>PlaneGeometry</code>, shading is not a problem: <a href="http://codepen.io/shshaw/pen/GJppEX" rel="nofollow noreferrer">http://codepen.io/shshaw/pen/GJppEX</a></p>
  
  <p>However, I tried to switch to <code>PlaneBufferGeometry</code> to see if I could get better performance, but the shading disappeared.
  <a href="http://codepen.io/shshaw/pen/oXjyJL?editors=001" rel="nofollow noreferrer">http://codepen.io/shshaw/pen/oXjyJL?editors=001</a></p>
  
  <pre><code>var planeGeometry = new THREE.PlaneBufferGeometry(opts.planeSize, opts.planeSize, opts.planeDefinition, opts.planeDefinition),
      planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x555555,
        emissive: 0xdddddd,
        shading: THREE.NoShading
      }),
      plane = new THREE.Mesh(planeGeometry, planeMaterial),
      defaultVertices = planeGeometry.attributes.position.clone().array;
  
    function randomVertices() {
      var vertices = planeGeometry.attributes.position.clone().array;
      for (var i = 0; i &lt;= vertices.length; i += 3) {
        // x
        vertices[i] = defaultVertices[i] + (rand(-opts.variance.x, opts.variance.x));
        // y
        vertices[i + 1] = defaultVertices[i + 1] + (rand(-opts.variance.y, opts.variance.y));
        // z
        vertices[i + 2] = rand(-opts.variance.z, -opts.variance.z);
      }
      return vertices;
    }
  
    plane.geometry.attributes.position.array = randomVertices();
  </code></pre>
  
  <p>As I saw suggested <a href="https://stackoverflow.com/a/28899589/1012919">in this answer to 'Shading on a plane'</a>, I tried:</p>
  
  <pre><code>plane.geometry.computeVertexNormals();
  </code></pre>
  
  <p>On render, I have tried all of the following attributes for the geometry to make sure it's updating the normals &amp; vertices, like I've done on the working example with <code>PlaneGeometry</code>:</p>
  
  <pre><code>plane.geometry.verticesNeedUpdate = true;
  plane.geometry.normalsNeedUpdate = true;
  plane.geometry.computeVertexNormals();
  plane.geometry.computeFaceNormals();
  plane.geometry.normalizeNormals();
  </code></pre>
  
  <p>What has happened to the shading? Can I bring it back on a <code>PlaneBufferGeometry</code> mesh, or do I need to stick with <code>PlaneGeometry</code>?</p>
  
  <p>Thanks!</p>