'Customize PlaneGeometry edges for each segment in ThreeJS

Currently PlaneGeometry has an option to change segment width and height but this has no effect on edges. Each segment currently has indexed positions to create an 'N' shape when viewing the geometry in wireframe mode:

Indexes currently are:

  • 0 = South West
  • 1 = North West
  • 2 = South East
  • 3 = North East

This gives us an 'N' shape for each segment with wireframes, however instead of this 'N' Shape i would like to create an 'X' shape with edges for every segment. Currently i'm using planes to create different heights and having an 'X' shape would make the result look less edgy shaped (screenshots below).

I think all required vertices already exists, but how is it possible to get an extra edge between point 0 and 3 for each segment?

I've tried looking for the answer online but couldn't find a clear answer on this matter, besides many articles are older than version R125 which made breaking changes to Geometries. Currently I'm using version R135.

I'm guessing i will need to create a custom Buffer Geometry, but am in doubt of how to execute this properly and not losing too much performance.

Current

Desired Edges

  • All red and blue lines are currently existing edges in wireframe mode.
  • All green lines are desired and currently not existing, what would be the best way to do this without losing performance?

Thanks in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source