Question

我使用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);
                }
            );

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

ThreeJs不同材质的立方体的每个面

1 个答案: