ShapeGeometry with regular mesh

[Denis]

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 mean

[Mugen87]

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

three.js webgl - geometry - shapes

[Denis]

Of course. I mean to generate different faces

[Mugen87]

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.

[hofk]

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?

[prisoner849]

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

[seanwasere]

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

Looking for Updated plug-in for CSG

Thank you Sean for writing that! I took your code, removed the existing geometry and added an example for Extrude Geometry use-case. (Referencing @waqast comment from earlier) Working well! [image] Codepen: https://codesandbox.io/s/cool-tdd-h94t8?file=/src/client/client.ts

[Jingru]

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

[Leeow76]

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?

[Jingru]

Hi, I find that you were confused by the filter condition.

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

The above filter conditions are derived from many attempts. I explored the rules of constructing faces with different index orders. And I find that the out faces are constructed by the specific orders.

If only use minItem < gridPointLength to filter indices, many faces will be missing from the edge of the shape.Because the edge faces will use points whose index larger than gridPointLength.

I guess there is a problem with the process of converting svg to geojson in your case.

[rahul_cp]

any solution to this issue ? i also encountered the same issue