[Closed] How to split/separate a single ShapeGeometry into individual Geometries base on faces?



This may be a unique case that I’m tackling.
I looked into the Constructive Solid Geometry CSG.js library, but am hoping I can do without it.

I’m working strictly with flat geometry 2D shapes on the XY plane (a.k.a THREE.ShapeGeometry)
Below is a close example of what I am trying to solve.

I am given a shape like the below image. It will explain what I"m trying to achieve.


If you already made a shape with [p1, p2, p3, ... p8], then why can’t you just manually make a geometry with [p1, p2, p3, p4] and then a second geometry with [p5, p6, p7, p8]?


Sorry if I didn’t make the example clearer.
The assumption is that you already have a single shape with these vertices in place.
Long story short, there is a process that forms the described shape above and it happens dynamically at run-time.

From that point forward, I am attempting to separate the single shape into multiple shapes.
I meant to hard code the points just to demonstrate how the ShapeGeometry is used for those that may not be familiar with it. Hope that helps make it clearer.

It is almost as if I am looking for a method similar to 3D software tool that can separate a combined object, who is made out of two or more geometries that are not touching each other.

If anyone is carious about how I’m getting this odd shape i’m describing above, here’s a high level visual how it came to be, it has to do with trimming a shape to fit within the contour of a main shape.


Still having a hard time understanding what you need to do. There’s no built-in method to split geometry by loose elements.

Are you talking about geometric boolean operations? Here’s an old article that might help you with that: http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/

Or maybe the clipping example does what you’re looking for? https://threejs.org/examples/#webgl_clipping_advanced


I looked at the clipping and for a sec it would do what I need.
but turns out, i actually need the geometry to be trimmed as if in reality, as each piece gets stored into its own class for later estimation for pricing calculations. In brief, i’m working on a material estimation app.

Thanks, @marquizzo, I think you described what I’m trying to do perfectly:
“There’s no built-in method to split geometry by loose elements.”

Anyhow, to clarify the the final goal, the end result would look something like this once you trimed all the rectangles.


Did I get it correclty, that you have a non-indexed shape buffer geometry?


Just a thought: use a library that can do boolean operations with polygons; you can obtain the coordinates of shape’s contour, using THREE.EdgesGeometry(), and convert them into the format of the library.

CSG can do the trick, of course :slight_smile: I’m not sure it works with shapes.


@prisoner849 I’m working with THREE.ShapeGeometry and not a buffer geometry. Honestly though, my lack of knowledge and unfamiliarity with buffer geometry, I am unable to respond to your question about non-indexed shape buffer geometry.

What I do know is that when the shape is created using THREE.ShapeGeometry, as described above, I do see vertices and faces like on any normal geometry.

What I was hoping was that there would be a way to look at the faces in the ShapeGeometry and be able to construct new geometry from faces that touch each other. At least that was one thought.

But then I am face with another challenge, where just because I am able to successfully extract the faces into groups (meaning faces that touch each other are consider a group), I would also have to know the order of the faces and vertices to reconstruct the geometry correctly correct? (coming from someone, I, who does not normally manually build geometry from scratch)

And from the looks of it, a lot of my searches do point back to the CSG library which is probably my best bet.


So, just out of curiousity, I’ve looked for a library that can do boolean operations on polygons and found polybooljs.
If you work with Three.js, it doesn’t mean that you have to do all the things with it. There are many good stuff around :slight_smile:

I wrote a simple example of using polybooljs + Three.js:


📕 Three.js Bookshelf

Awesome, @prisoner849 this could possibly be what I need just by looking at your example. I’ll study the Polybool library more to understand it. This looks more simpler to use over the CSG library for what i’m doing. With that I will close this thread as is.