title: three.js: How to get multiple materials working for one mesh
body: <p>I have a big problem with three.js:</p>
  
  <p>I want a simple cube with a different color on each face. I have tried this way:</p>
  
  <pre><code>// set the scene size
      var WIDTH = jQuery('#showcase').width() - 20, HEIGHT = jQuery('#showcase').height();
  
      // set some camera attributes
      var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000000;
  
      this.container = jQuery('#showcase');
  
      this.renderer = new THREE.WebGLRenderer();
      this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
      this.scene = new THREE.Scene();
      this.scene.add(this.camera);
  
      // camera start position
      this.camera.position.z = this.model.radius;
      this.camera.position.y = this.model.cameraY;
      this.camera.position.x = 0;
      this.camera.lookAt(this.scene.position);
  
      this.renderer.setSize(WIDTH, HEIGHT);
      this.container.append(this.renderer.domElement);
  
      //Multiple Colors
      var materials = [new THREE.MeshBasicMaterial({
          color : 0xFF0000
      }), new THREE.MeshBasicMaterial({
          color : 0x00FF00
      }), new THREE.MeshBasicMaterial({
          color : 0x0000FF
      }), new THREE.MeshBasicMaterial({
          color : 0xAA0000
      }), new THREE.MeshBasicMaterial({
          color : 0x00AA00
      }), new THREE.MeshBasicMaterial({
          color : 0x0000AA
      })];
  
      this.geometry = new THREE.CubeGeometry(100, 100, 100, materials);
  
      this.mesh = new THREE.Mesh(this.geometry,  new THREE.MeshFaceMaterial());
  
      this.scene.add(this.mesh);
  
      // create a point light
      this.pointLight = new THREE.PointLight(0xFFFFFF);
      this.pointLight.position = this.scene.position;
      this.scene.add(this.pointLight);
  
      this.renderer.render(this.scene, this.camera);
  </code></pre>
  
  <p>But I get this error message:
  "Uncaught TypeError: Cannot read property 'map' of undefined" from line 19152 in three.js. </p>
  
  <p>To me it seems to be a problem of the webgl renderer. In most topics I have found here and somewhere else, they were using the canvas renderer. But I want to stay with the webgl renderer.</p>
  
  <p>Does anyone know something about this problem?
  Thanks a lot:-)</p>