threejs BufferGeometry groups

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.x = 4;
camera.position.y = 10;
camera.position.z = 4;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
let spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(9, 10, 1);
scene.add(spotLight);
var light = new THREE.AmbientLight(0x202020); // soft white light
scene.add(light);

// example starts here
let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

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();
gg.addGroup(0,102,1);
scene.add(new THREE.Mesh(gg,mm));

let animate = function() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
};

animate();