Three.js: How to get several materials working on one grid

Question

I have a big problem with three.js:

I want a simple cube with a different color on each face. I 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 an error: "Uncaught TypeError: Unable to read the 'map' property from undefined" from line 19152 in three.js.

It seems to me that the problem is with the webgl renderer. In most of the topics I found here and elsewhere, they used canvas rendering. But I want to stay with the webgl renderer.

Does anyone know something about this issue? Thank you very much: -)

Answer 1

try it

 this.geometry = new THREE.CubeGeometry(100, 100, 100); this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial(materials)); 

Answer 2

perhaps try working with an array.

With three.js 49 (doesn't work if it works with 57), I used this code for skybox with various materials:

 var axes = new THREE.AxisHelper(); scene.add( axes ); var materialArray = []; materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) })); var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1, materialArray ); var skybox = new THREE.Mesh( skyboxGeom, new THREE.MeshFaceMaterial() ); skybox.flipSided = true; scene.add( skybox ); 

Answer 3

Try it also by applying vertex colors.

 var geom = new THREE.BoxGeometry(20, 20, 20); var faceIndices = ['a', 'b', 'c']; var vertexIndex, point; mat = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }); mesh = new THREE.Mesh(geom, mat); scene.add(mesh); geom.faces.forEach(function (face) { // loop through faces for (var i = 0; i < 3; i++) { vertexIndex = face[ faceIndices]; point = geom.vertices[vertexIndex]; color = new THREE.Color( point.x + 0.5, point.y + 0.5, point.z + 0.5 ); face.vertexColors[ i ] = [![the output will be as in the attached picture][1]][1]color; } });