title: How to update material of cube on runtime using WebGL?
body: <p>I'm using three.js for doing animations. I want to dynamically update a material of a cube mesh. Here is example:</p>
  
  <pre><code>// create cube geometry 
  var material1 = [new THREE.MeshBasicMaterial({color:0xBEE2FF}),.....];
  var geometry = new THREE.CubeGeometry(50, 50, 50,0,0,0,material1 );
  var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
  
  // ...
  
  var material2 = [new THREE.MeshBasicMaterial({color:0xFFFFFF}), ...];
  cube.geometry.materials = material2;
  </code></pre>
  
  <p>If I use CanvasRenderer, it works. But when I change to WebGL Renderer, it throws error: Uncaught TypeError: Cannot read property 'map' of undefined </p>
  
  <p>How to update the material of a cube on runtime using WebGL?</p>