渲染多个框只有在完全平方时才能正确显示

Question

我正在使用一些逻辑根据高度、宽度和深度中的项目数量将框添加到我的场景中，并且当它们完全呈正方形时效果很好。

如果我想使用不同的矩形形式，问题就来了：

我是这方面的新手。我该如何更正它？

private addCubes() {
     // geometry
 const geometry = new THREE.BoxGeometry(1,4,4);
 const edgesGeometry = new THREE.EdgesGeometry(geometry);

 // material
 const material = new THREE.MeshBasicMaterial({
   color: 0x0d6efd,
 });
 const edgesMaterial = new THREE.LineBasicMaterial({
   color: 0x000000
 });

  // positions
for (let x = 0; x < 2; x++) {
  for (let y = 0; y < 1; y++) {
    for (let z = 0; z < 2; z++) {
      // mesh
      const mesh = new THREE.Mesh(geometry, material);
      mesh.scale.multiplyScalar(0.9);
      mesh.position.set(x, y, z);
      this.scene.add(mesh);

      const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial);
      mesh.add(lines);
    }
  }
}
}

Answer 1

将 mesh.position.set(x, y, z) 更改为 mesh.position.set(x, y, z * 4)。您的方框在 z 方向上有 4 个单位深，但您只将第二排方框移动 1 个单位，因此它们重叠。

渲染多个框只有在完全平方时才能正确显示

Rendering multiple boxes only displays correctly if perfectly squared

javascript

graphics

three.js