title: How to change colour of CubeGeometry with Three.js?
body: <p>Note that I need to change it's colour <em>after</em> it has been created. I can create a new cube based on the original, but I would really rather not do that. In my use case there are many cubes with references all over the place and it would be a pain to update them all. Also, they will change their colour fairly often.</p>
  
  <p>There must be a better way to do this?</p>
  
  <pre><code>var startColours  = [0x0000FF, 0x00FF00, 0xFF0000, 0x00FFFF, 0xFF00FF, 0xFFFF00];
  var changeColours = [0x000000, 0x000000, 0x808080, 0x808080, 0xFFFFFF, 0xFFFFFF];
  var material = new THREE.MeshLambertMaterial( 
      { color: 0xFFFFFF, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
  
  var setColours = function(geometry, colours) {
      for (var i = 0; i &lt; 6; i++) {
          geometry.faces[i].color.setHex(colours[i]);
      }
  }
  
  var geometry = new THREE.CubeGeometry(1.0, 1.0, 1.0);
  setColours(geometry, startColours);
  var cubeMesh = new THREE.Mesh(geometry, material);
  scene.add(cubeMesh);
  
  // Try and change the colour after 2 seconds.
  setTimeout("attempt2()", 2000);
  
  function attempt1() {
      // Do the obvious.
      setColours(geometry, changeColours);
      // Doesn't work - no errors, but the cube just doesn't change colour.
  }
  
  function attempt2() {
      setColours(geometry, changeColours);
  
      scene.remove(cubeMesh);
      // Create a new mesh with a *clone* of the geometry and material of the original.
      var newCubeMesh = new THREE.Mesh(cubeMesh.geometry.clone(), cubeMesh.material);
      scene.add(newCubeMesh);
      // Does work - but having to create a completely new Mesh object is pants.
  }
  </code></pre>