THREEJS-具有2种材料的索引BufferGeometry

Question

我想创建一个可以容纳许多材料的单个缓冲几何。 我读过，为了在BufferGeometry中实现此目的，我需要使用组。因此，我创建了以下“地板”网格：

var gg=new THREE.BufferGeometry(),vtx=[],fc=[[],[]],mm=[
    new THREE.MeshLambertMaterial({ color:0xff0000 }),
    new THREE.MeshLambertMaterial({ color:0x0000ff })
];
for(var y=0 ; y<11 ; y++)
    for(var x=0 ; x<11 ; x++) {
        vtx.push(x-5,0,y-5);
        if(x&&y) {
            var p=(vtx.length/3)-1;
            fc[(x%2)^(y%2)].push(
                 p,p-11,p-1,
                 p-1,p-11,p-12
            );
        }
    }
gg.addAttribute('position',new THREE.Float32BufferAttribute(vtx,3));
Array.prototype.push.apply(fc[0],fc[1]); gg.setIndex(fc[0]);
gg.computeVertexNormals();
gg.addGroup(0,100,0);
gg.addGroup(100,100,1);
scene.add(new THREE.Mesh(gg,mm));

问题：

• 查看https://www.crazygao.com/vc/tst2.htm中的示例，可以看到BLUE材料看起来很奇怪。
  
• 单一材料展示确定。
  
• 2种具有上述分组的材料，无论如何都显示出BLUE真正的舞台。
  
• 将第一个组更改为start = 0，count = 200（对于所有三角形），然后删除第二个组，将显示更多的RED正方形（显然），但是仍然不符合我希望的显示方式。
  
• 将第一个组的计数更改为任何大于200的值（显然）将导致尝试访问超出范围的顶点而导致崩溃...
  

有人清楚我应该怎么做吗？

我正在使用THREE.js v.101，并且我不想为此创建特殊的自定义着色器，或者不添加其他顶点缓冲区来复制已经拥有的着色器，并且我不希望创建2个网格物体，因为这可能会得到更多复杂的高级模型。

Answer 1

查看以下内容：https://jsfiddle.net/mmalex/zebos3va/

---

修复＃1 -不要定义组0

修复＃2 -.addGroup中的第二个参数是缓冲区长度，必须为3的倍数（100错误）

var gg = new THREE.BufferGeometry(),
    vtx = [],
    fc = [[],[]],
    mm = [
        new THREE.MeshLambertMaterial({
            color: 0xff0000
        }),
        new THREE.MeshLambertMaterial({
            color: 0x0000ff
        })
    ];

for (var y = 0; y < 11; y++)
    for (var x = 0; x < 11; x++) {
        vtx.push(x - 5, 0, y - 5);
        if (x && y) {
            var p = (vtx.length / 3) - 1;
            fc[(x % 2) ^ (y % 2)].push(
                p, p - 11, p - 1,
                p - 1, p - 11, p - 12
            );
        }
    }

gg.addAttribute('position', new THREE.Float32BufferAttribute(vtx, 3));
fc[0].push.apply(fc[1]);
gg.setIndex(fc[0]);
gg.computeVertexNormals();

// group 0 is everything, unless you define group 1
// fix #1 - don't define group 0
// fix #2 - 2nd parameter is buffer length, it must be multiple of 3 (100 was wrong)

gg.addGroup(0, 102, 1);

scene.add(new THREE.Mesh(gg, mm));