Wireframe mode for drawing mesh

Hello support team,

I’ll try to draw wireframe of the mesh. At the moment I have found Lines object which can be used to draw lines, but it also needs to be filled with data and I assume that these lines will overlap with the original mesh.
Is this the only correct solution or is there a more convenient method to draw wireframe of the mesh?

If you process a CAD file to zcad, it comes with edges that are rendered over the top of the meshes.

If you want to draw a wireframe of a regular mesh, here is some sample code to do that. It is a big hacky, but works.
The mesh has indexing for drawing each of the polygon edges, so here we extract that into 2 Lines geometries.
We share the positions attribute directly between the mesh and the edges and hard edges.

Note: computeHardEdgesIndices uses data generated during computeVertexNormals so is quite cheap.

  const mesh = new Mesh()
  const geomItem = new GeomItem('geom', mesh, new Material('mat', 'StandardSurfaceShader'))
  scene.getRoot().addChild(geomItem)

  mesh.computeVertexNormals()

  // Display all the Mesh edges in a lines geometry attached to the mesh.
  const edges = new Lines()
  edges.__vertexAttributes.set('positions', mesh.getVertexAttribute('positions'))
  edges.setNumVertices(mesh.getNumVertices())
  edges.__indices = new Uint32Array(mesh.edgeVerts)
  const edgesMaterial = new Material('edgesMaterial', 'LinesShader')
  edgesMaterial.getParameter('BaseColor').setValue(new Color(0.2, 0.2, 0.2))
  edgesMaterial.getParameter('Opacity').setValue(0.3)
  edgesMaterial.getParameter('Overlay').setValue(0.000001)
  const edgesItem = new GeomItem('edges', edges, edgesMaterial)
  geomItem.addChild(edgesItem)

  // Display all the hard edges as darker lines.
  const hardEdges = new Lines()
  hardEdges.__vertexAttributes.set('positions', mesh.getVertexAttribute('positions'))
  hardEdges.setNumVertices(mesh.getNumVertices())
  hardEdges.__indices = mesh.computeHardEdgesIndices()
  const hardEdgesMaterial = new Material('hardEdgesMaterial', 'LinesShader')
  hardEdgesMaterial.getParameter('BaseColor').setValue(new Color(0.1, 0.1, 0.1))
  hardEdgesMaterial.getParameter('Opacity').setValue(1)
  hardEdgesMaterial.getParameter('Overlay').setValue(0.00001)
  const hardEdgesItem = new GeomItem('hardEdges', hardEdges, hardEdgesMaterial)
  geomItem.addChild(hardEdgesItem)

Now each time you update the mesh, you can update the edges like this…

      mesh.computeVertexNormals()

      edges.__numVertices = mesh.getNumVertices()
      edges.__indices = new Uint32Array(mesh.edgeVerts)
      edges.emit('geomDataTopologyChanged')

      hardEdges.__numVertices = mesh.getNumVertices()
      hardEdges.__indices = mesh.computeHardEdgesIndices()
      hardEdges.emit('geomDataTopologyChanged')