title: THREEJS - Indexed BufferGeometry with 2 materials
body: <p>I want to create ONE single buffer geometry that can hold many materials.
  I have read that in order to achieve this in BufferGeometry, I need to use groups. So I created the following &quot;floor&quot; mesh:</p>
  <pre class="lang-js prettyprint-override"><code>var gg=new THREE.BufferGeometry(),vtx=[],fc=[[],[]],mm=[
      new THREE.MeshLambertMaterial({ color:0xff0000 }),
      new THREE.MeshLambertMaterial({ color:0x0000ff })
  ];
  for(var y=0 ; y&lt;11 ; y++)
      for(var x=0 ; x&lt;11 ; x++) {
          vtx.push(x-5,0,y-5);
          if(x&amp;&amp;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));
  </code></pre>
  <h1>THE ISSUE:</h1>
  <ul>
  <li>looking at the example in <a href="https://www.crazygao.com/vc/tst2.htm" rel="nofollow noreferrer">https://www.crazygao.com/vc/tst2.htm</a> can see that the BLUE material looks weird.<br></li>
  <li>Single material showup OK.<br></li>
  <li>2 materials with group as above, in any case show the BLUE really strage.<br></li>
  <li>Changing the 1st group to start=0, count=200 (for all triangles) and removing the 2nd group, will show MORE squares of RED (obviously) but still NOT in the way I would like it to show.<br></li>
  <li>Changing the 1st group count to any value greater than 200 will cause a crash (obviously) of attempting to access vertex out of range... <br></li>
  </ul>
  <h1>Is anyone know clearly what shall I do?</h1>
  <p>I am using THREE.js v.101 and I prefer to not create special custom shader for that, or add another vertex buffer to duplicate those I already have, and I prefer to not create 2 meshes as this may get much more complicated with advanced models.</p>