geometry.setIndex回路

Question

我已经成功地生成了图片中的模式。现在我需要弄清楚我如何能自动做到这一点。基本上，每秒钟的平方都需要镜像。

如果有更简单的方法来做这件事，我很乐意接受建议。

图像

我的代码是这样的：

// 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

你可以取PlaneGeometry并重新计算它的索引。

​

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>

​