three.js: How to get multiple materials working for one mesh

I have a big problem with three.js: I want a simple cube with a different color on each face. I have tried this way: ``` // 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); ``` But I get this error message: "Uncaught TypeError: Cannot read property 'map' of undefined" from line 19152 in three.js. 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. Does anyone know something about this problem? Thanks a lot:-)