How to control the lines of WireframeGeometry?

[remote garnet]

Hi, I have a BufferGeometry on which I set a bunch of Vector3 points to create a shape. Additionally I have a mesh with WireframeGeometry set to the same geometry as my shape.

As seen in the screenshot, the wireframe does not follow the edge. I've been changing the order of points to try get it to work, but this seems impossible. It will always show a diagonal and sometimes missing edges.

Ive also tried using EdgeGeometry, geometry.setFromPoints and setIndex with indices, but these results are also unreliable or draw all edges rather than just the outside ones.

How can I get only the outside edges to show in the wireframe?

function updateGeometry() {
    // ... calculating point positions
    const points = [
      left,
      leftClipVantage,
      fold,
      leftClipVantage,
      foldClipVantage,
      fold,

      rightClipVantage,
      right,
      foldClipVantage,
      right,
      fold,
      foldClipVantage,
    ]

    this.setGeometryPoints(points)
  }

  setGeometryPoints(geometryPoints: Vector3[]) {
    const values = geometryPoints.flatMap(p => [p.x, p.y, p.z])
    this.setGeometryValues(values)
    this.updateWireframeGeometry() 
  }

  updateWireframeGeometry() {
    this.wireframeMesh.geometry = new WireframeGeometry(this.geometry)
    this.wireframeMesh.updateMatrixWorld(true)
  }

  setGeometryValues(geometryValues: Array<number>) {
    this.geometry.setAttribute(
      'position',
      new Float32BufferAttribute(geometryValues, 3)
    );
    this.geometry.computeVertexNormals();
    this.geometry.computeBoundingBox();
    this.geometry.computeBoundingSphere();
  }

[elder smelt]

use an index buffer and link the triangles together in that.
I suspect the ordering on your vertices is not what you/threejs expects.

you have six points..

lay them out top left to bottom right..

then use the index buffer to declare the triangles. in clockwise order..

so for..

0 1 2
3 4 5

the index buffer/array should be 0,1,4, 4,3,0, 1,2,5, 5,4,1

you points array is just the 6 points..

and when you've set it..

do
this,geometry.setIndex([ 0,1,4, 4,3,0, 1,2,5, 5,4,1 ])

@remote garnet

[remote garnet]

@elder smelt Thanks for some clarifications. I was still struggling with what to use in regards to geometry and mesh. Line, LineSegments, WireframeGeometry and EdgesGeometry. These are the results I found:

With the indices and points set as you noted, using LineSegments(EdgeGeometry(geometry)) (this is the example used in EdgesGeometry source file) or WireframeGeometry, I get the result shown in screenshot 1.

But using Line instead of LineSegments I get a quad-outline like in screenshot 2. The same result I get when using geometry.setFromPoints(vertexPoints), where vertexPoints is the Vector3 points of each vector in order:

    const vertexPoints = [
      left, fold, foldClipVantage,
      foldClipVantage, leftClipVantage, left,
      fold, right, rightClipVantage,
      rightClipVantage, foldClipVantage, fold,
    ]

Adding a fifth point using above setup I get screenshot 3. What I would ideally want is get only the outline of the points, not the lines inside. My hope was that EdgesGeometry or WireframeGeometry would be able to do this, but I suppose not. EdgesGeometry seems to be only for 3d shapes as it depends on the normals between adjoining faces, which are all the same for a flat shape. Not sure what the deal is with WireframeGeometry, it seems to do the same result as EdgesGeometry.

I guess I'll need to just use the Line mesh with only the points that are on the outside of a (flat 3d) mesh using some algorithm. Or maybe Shape offers some options, will have to look into that.