javascript - ThreeJs不同 Material 的立方体的每个面

我使用GLTFLoader加载了从Blender导出的多维数据集对象，并尝试使用addGroup方法在多维数据集的每个面上应用颜色，但是结果与预期的不同。

我得到的结果如下图所示。



可以从链接下载模型
https://github.com/SourceCodeZone/3D/blob/master/Cube/test.glb

我在这里指的是答案BufferGeometry: how to render groups of faces
下面是代码。

            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);
                }
            );

最佳答案

恐怕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