geometry.setIndex loop

Question

I've successfully generated the pattern in the picture. Now i need to figure out how i can do it automatically. Basically every second square needs to be mirrored.

If there's an easier way to do this i'm happy to take suggestions.

image

This is how my code looks:

// For widthSegments
for (let x = 0; x < world.plane.widthSegments; x++){
   for (let y = 0; y < world.plane.heightSegments; y++){
   vertices.push(x, y, 0)      // 0, 4, 8,  12, 16, 20, 24, 28, 32, 
   vertices.push(x+1, y, 0)    // 1, 5, 9,  13, 17, 21, 25, 29, 33, 
   vertices.push(x+1, y+1, 0)    // 2, 6, 10, 14, 18, 22, 26, 30, 34, 
   vertices.push(x, y+1, 0)  // 3, 7, 11, 15, 19, 23, 27, 31, 35, 
   }
}
planeMesh.geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3))

planeMesh.geometry.setIndex([  // I want to generate these automatically
   0,  1,   3,   3,  1,  2,  // 1
   2,  6,   3,   3,  6,  7,  // 2    
   7,  6,  11,  11,  6, 10,  // 3
   10, 14, 11,  11, 14, 15,  // 4
    
   1,  17, 18,  18,  2,  1,  // 5
   2,  18,  6,   6, 18, 22,  // 6
   6,  22, 26,  26, 10,  6,  // 7
   10, 26, 14,  14, 26, 30,  // 4
    
   17, 33, 18,  18, 33, 34,  // 9
   18, 34, 38,  38, 22, 18,  // 10
   22, 38, 26,  26, 38, 42,  // 11
   26, 42, 46,  46, 30, 26,  // 4
    
   33, 49, 50,  50, 34, 33,  // 13
   34, 50, 38,  38, 50, 54,  // 14
   38, 54, 58,  58, 42, 38,  // 15
   42, 58, 46,  46, 58, 62,  // 16
]);

Answer 1

You can take PlaneGeometry and re-calculate its index.

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  60,
  innerWidth / innerHeight,
  0.1,
  100
);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);

let g = new THREE.PlaneGeometry(10, 10, 10, 10);
recalcIndex(g);
let m = new THREE.MeshBasicMaterial({ color: "aqua", wireframe: true });
let o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

function recalcIndex(plane) {
  let w = plane.parameters.widthSegments;
  let h = plane.parameters.heightSegments;
  let idx = [];
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      let a = x + ((w + 1) * y);
      let b = x + ((w + 1) * (y + 1));
      let c = (x + 1) + ((w + 1) * (y + 1));
      let d = (x + 1) + ((w + 1) * y); 
      
      if ((x + (y % 2)) % 2 == 0) {
        idx.push(a, b, d, b, c, d);
      } else {
        idx.push(b, c, a, c, d, a);
      }
      
    }
  }
  plane.setIndex(idx);
}

</script>