Три разных материала для каждой грани куба

Question

Я загружаю объект куба, экспортированный из Blender, используя GLTFLoader, и пытаюсь применить цвет на каждой грани куба, используя метод addGroup, но результат не такой, как ожидалось.

Я получаю результат следующим образомизображение ниже.

Модель можно скачать по ссылке https://github.com/SourceCodeZone/3D/blob/master/Cube/test.glb

Я имею в виду ответ здесь BufferGeometry: какдля рендеринга групп лиц Ниже приведен код.

            var cube;
            var loader = new THREE.GLTFLoader();
            loader.load(
                './Model/GLTF/test.glb',
                function ( gltf ) {
                    gltf.scene.traverse( function ( node ) {
                              if(node.isMesh){
                        if(node.name==="Cube")
                             cube = node;
                                                   }

                     });
                    scene.add(cube);

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



                },
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },

                function ( error ) {
                    console.log( 'An error happened---' +error);
                }
            );

Answer 1

Боюсь, BufferGeometry.groups работают немного по-другому.Во-первых, у вашей геометрии бокса есть 24 вершины и 36 индексов.Один треугольник определяется тремя индексами.Это означает, что у вас всего 12 треугольников (что правильно, поскольку у куба есть шесть сторон, а одна сторона определяется двумя треугольниками).

Данные групп относятся к вершинам в случае неиндексной геометрии и киндексы в случае индексированной геометрии.Например, если вы хотите применить три материала к вашему кубу (один материал для двух сторон), код будет выглядеть так:

var geometry = object.geometry;
geometry.clearGroups();
geometry.addGroup( 0, 12, 0 );
geometry.addGroup( 12, 24, 1 ); 
geometry.addGroup( 24, 36, 2 );
object.material = materials;

Демонстрационная версия: https://glitch.com/~buffergeometry-groups

three.js R108