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.

refference:
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

Hey, first time posting here. I tried to do the same with an SVG shape instead of GeoJSON (still converted vertices to GeoJSON to replicate your solution as well as possible). I’m having a hard time understanding the part where you filter out indices. I understand filtering out the faces that don’t include grid points (minItem > gridPointLength) but what do the rest of the conditions do? I mean the part:

(item[0] > item[1] && item[1] > item[2]) ||
      (item[1] > item[2] && item[2] > item[0]) ||
      (item[2] > item[0] && item[0] > item[1])

In my recreation I get some faces not filtering out properly, I’m super tired and frustrated, thought maybe someone can help me out with this - made a codepen: https://codepen.io/Leeow76/pen/xxJrjmK

When I render out curve points and points inside the shapes, It seems that the points are where they should be and the triangulation is not working the way I hoped?