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. How can I get a different material on each face?

        var geometry = new THREE.OctahedronGeometry(1, 0);

        var materials = [
            new THREE.MeshPhongMaterial( { color: 0x050505, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x060606, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x050505, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x070707, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } )
        ];

        var someMesh = new THREE.SceneUtils.createMultiMaterialObject( geometry , materials );

        someMesh.castShadow = true; //default is false
        someMesh.receiveShadow = true; //default
        scene.add( someMesh );

回答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 2

var 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

来源：https://stackoverflow.com/questions/48729579/three-js-how-to-add-materials-array-to-octahedron-geometry

标签

javascript

three.js