THREE.MultiMaterial has been removed. Use an Array instead

Question

I've created a sketchup model of a building and exported it to a .dae and texture file. I want to display it in the browser using three.js, but I get the error THREE.MultiMaterial has been removed. Use an Array instead. How can I solve this problem?

Answer 1

In new version of three.js you must use simple array with (items) materilas not multimaterial objects. Here is example :

    var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
    var materials = [
        new THREE.MeshDepthMaterial(),
        new THREE.MeshNormalMaterial(),
        new THREE.MeshBasicMaterial( { wireframe: true } ),
        new THREE.MeshLambertMaterial( { color: 0xff0000 } ),
        new THREE.MeshPhongMaterial( { color: 0x0000ff } ),
        new THREE.MeshStandardMaterial( { color: 0x00ff00 } ),
    ];
    var mesh = new THREE.Mesh( geometry, materials );

Also important! Access looks like :

    if ( Array.isArray( object.material ) ) {
        for ( var m = 0; m < object.material.length; m++ ) {
            object.material[ m ].color.set( 0xffffff );
        }
    } else {
        object.material.color.set( 0xffffff );
    }

On some older ver of browsers isArray is not supported. In that case use :

   if (typeof object.material.length !== 'undefined' ) {
     // your code
   }

I am glad for this improvement. I don't like too much theory and complex programming paradigm. Best way is: make it simple when you can.