How to combine two shapes with different number of vertices into one shape as shown in the image`

Questions
1

Hi all.

I’m fairly new to BabylonJS. Happy to join all of you.
I’m working on creating some motion graphics directly on BabylonJS, so I have to create the meshes by code.
I got stuck when I was trying to create a hole in a flat plane (as shown below). I understand that I could use CSG for boolean operations, but whenever I do this type of stuff in Blender I usually have the hole embedded with the mesh.
I also tried using Ribbons, but it didn’t work with shapes that have different number of vertices.
It’d be really helpful if any you BabylonJS wizard could provide me a way to achieve this effect.

Here’s where I’m currently at,

Thanks in advance :pray:

image
image1335×674 38 KB

2

I’m not sure what this means? Are you trying to create a flat mesh plane that has a hole, all as one mesh?

You might be able to use native CSG objects. Or you can create a mesh for the plane and a mesh for the hole. Then use CSG to suntract the hole from the plane, and turn the result back to a mesh. Voila! A plane mesh with a hole.

If you have trouble aligning the two, create a cylinder and subtract that from the plane.

3

I was trying to connect the vertices of the two shapes instead of cutting a mesh with another.
I tried to cut the plane with a cylinder using CSG and I got this result,

image
image670×582 70.8 KB

I’m still figuring out CSG and will let you know after using native CSG objects.

4

It doesn’t look like you’re using subtractFrom(). Do you have a PG?

You also have to dispose the original meshes otherwise they will be present in the scene.

5

Here’s the PG, https://playground.babylonjs.com/#FECU6P#7
I’ve set the original meshes’ visibility to false.

6

CSG does not work well if meshes have no volume (like a plane). Try to give a small depth to the plane:

3 Likes