How do I remove Digonal Edge line on my custom edge

Questions
, ,
1

The title said everything but I have this custom Edge line that connect the vertex it know which vertex to connect around it look at the surface and it know which its edge then it knows it vertex on those vertex it make connecting but the problem is is creating Diagonal which I don’t want can any body help me solve this problem, Please keep in mind I don’t want to use the stander package that comes along three js and this is part of script:

const createEdge = (object) => {
const edges = new Map();

object.traverse((child) => {
  if (child.isMesh) {
    const geometry = child.geometry;
    const positions = geometry.attributes.position.array;
    const indexArray = geometry.index.array;

    for (let i = 0; i < indexArray.length; i += 3) {
      for (let j = 0; j < 3; j++) {
        const v1Index = indexArray[i + j];
        const v2Index = indexArray[i + (j + 1) % 3];

        const v1 = new THREE.Vector3(
          positions[v1Index * 3],
          positions[v1Index * 3 + 1],
          positions[v1Index * 3 + 2]
        );
        const v2 = new THREE.Vector3(
          positions[v2Index * 3],
          positions[v2Index * 3 + 1],
          positions[v2Index * 3 + 2]
        );

        // Ensure that the vertices are sorted consistently to prevent duplicate edges
        const edge = [v1, v2].sort((a, b) => a.x - b.x);
        const key = `${edge[0].x},${edge[0].y},${edge[0].z},${edge[1].x},${edge[1].y},${edge[1].z}`;

        edges.set(key, edge);
      }
    }
  }
});

const edgeGeometry = new THREE.BufferGeometry();
const edgeVertices = [];
const edgeColors = [];

for (const edge of edges.values()) {
  const edgecolor = new THREE.Color(0X00FF00); // Red color

  edgeVertices.push(edge[0].x, edge[0].y, edge[0].z);
  edgeVertices.push(edge[1].x, edge[1].y, edge[1].z);

  edgeColors.push(edgecolor.r, edgecolor.g, edgecolor.b);
  edgeColors.push(edgecolor.r, edgecolor.g, edgecolor.b);
}

edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgeVertices, 3));
edgeGeometry.setAttribute('color', new THREE.Float32BufferAttribute(edgeColors, 3));

const edgeMaterial = new THREE.LineBasicMaterial({ vertexColors: true });
const edgeLine = new THREE.LineSegments(edgeGeometry, edgeMaterial);
scene.add(edgeLine);

}

2

I’m not exactly sure what problem you are trying to solve, but just wanted to point out that the longest edge of a given triangle is often the diagonal… so if you drop the longest edge, you might get something that is close to what you want?

To truly detect diagonals shared by a quad, you’d probably need to use a datastructure like DCEL to find shared edges and determine if the shared faces form an angle lower than a certain threshold?

Here’s a class I wrote a while ago that tries to make wireframe quads without diagonals:

https://city-instanced.glitch.me/quadlines.js