ShapeGeometry with regular mesh

Hi there! Anyone knows how to create a custom shape with regular mesh like a PlaneGeometry with segments? Just look at the picture to see what I meanshape

Have you already checked out the code in the following example?

Of course. I mean to generate different faces

Ah, now I see what you mean! Well no, there is no way to achieve this with the built-in geometry generators. Shapes need to be triangulated and you have no influence on how this triangulation happens.

You can create the geometry yourself. Compare e.g. Create a curved plane surface which dynamically changes its size

Then you have to determine the intersection points of the heart curve with the horizontal and vertical lines. Then you can define the cut triangles and remove the ones that are completely outside. Do some work. Perhaps there is a more elegant solution?

1 Like

Or use CSG somehow :slight_smile:
Or put points in formation of a heart and try to use Delaunator.

See this recent post where a THREE.Shape was used in the CSG operations.

Hi, I was considering the same problem recently, and I find an ideal solution for me, hope that could help you. Followings are the points:

  1. Caculate the extent of your shape coordinate, and create an array of coordinates with a fixed intervals in x and y direction.
  2. Finds Points that fall within shape(polygon) by using Function pointsWithinPolygon in turf.js. Then push all shape points into the points array.
  3. Caculate the faces indices array of the points array by using Delaunator.js.
  4. Delete the unwanted indices. In my case, unwanted triangles out of the shape was created.
  5. Creat buffergeometry with the points array and indices array.

The following example shows more details.

1.Turf.js | Advanced Geospatial Analysis
2.GitHub - mapbox/delaunator: An incredibly fast JavaScript library for Delaunay triangulation of 2D points
3.Three.js + Delaunator

1 Like