Three.js: How To Add Materials Array To Octahedron Geometry

I would like to add multiple materials to a THREE.OctahedronGeometry. This works fine for box objects, but for THREE.OctahedronGeometry I just get the first material on all faces.

Solution 1:

You can add support for multi-materials to any THREE.BufferGeometry by specifying groups. Use a pattern like so:

var geometry = new THREE.OctahedronBufferGeometry( 5, 0 );

geometry.clearGroups(); // just in case
geometry.addGroup( 0, 3, 0 ); // first 3 vertices use material 0
geometry.addGroup( 3, 3, 1 ); // next 3 vertices use material 1
geometry.addGroup( 6, Infinity, 2 ); // remaining vertices use material 2var materials = [
    new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
    new THREE.MeshBasicMaterial( { color: 0x0000ff } ),
];


var mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );

If you must use THREE.Geometry, you can add support for multi-materials by specifying a material index for each face. See three.js updating geometry face materialindex.

If all you want to do is have a different color on each face, it is much more efficient to specify face-colors or vertex colors and render the entire geometry with a single material. (But that is a separate issue.)

three.js r.89