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

Question

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:-)

Solution 1

Try this

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

Solution 2

maybe try to work with an array.

With three.js 49 (dont of if it works with 57) i used this code for a skybox with different 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 );

Comments

[gaitat]

You can find you answer at stackoverflow.com/questions/13922130/…

[user151496]

but how does it distribute the materials to faces?

[duhaime]

This post gives more information on the mapping of materials to faces: stackoverflow.com/questions/45796655/…