How to create an irregular shape

Questions
1

Hi!

I am new to babylon js so I am still struggling and learning.

I have the following data (comes from an API, so I cannot pre-render an obj/gltf-file):

"positions": [
	[20, -10, 20],
	[20, -10, -20],
	[20, 10, -20],
	[20, 10, 20],
	[15, 15, 0],
	[-15, 15, 0],
	[20, -10, 20],
	[-20, 10, 20],
	[-20, 10, -20],
	[-20, -10, -20]
]
"faces": [
	[1, 2, 3, 4], 
	[7, 1, 4, 8],
	[10, 7, 8, 9],
	[2, 10, 9, 3],
	[10, 2, 1, 7],
	[8, 4, 5, 6],
	[4, 3, 5],
	[9, 8, 6],
	[3, 9, 6, 5]
]

byggnad
byggnad740×630 5.18 KB

Are there any magic function to create a mesh (the image) from these positions and faces? Note that a face may have 4 positions or more.

If possible, I would like to keep the faces so that they can be individually painted.

Thanks for any help.

2

As far as I know, custom Babylon meshes are build from triangles.

For one project I had to redraw all meshes in Babylon (building meshes instead of importing). But for that I had to change what the API was producing. So that it always returned a sorted array of positions (of a triangulated mesh). Here’s some documentation:

If you can build a custom mesh using ‘quads’ or a combination of ‘quads’ and ‘tris’. I’d love to know how to do it too!

3

This is not possible, as the faces are always triangular.

If you want to draw the mesh outline as in your screenshot, instead of using the built-in edge renderer (which will outline triangles), you can create the lines yourself using the face descriptions you have.

4

Thanks for the information, then I know it is something I have to write code for myself. I was hoping there was something like ConvexGeometry in ThreeJS, which creates a convex hull around points.

5

I don’t think we have such a function in Babylon.js, but note that you’re not guaranteed to get the mesh you want from the point cloud using an automated algorithm. Since you already know the faces, it’s easier (and quicker) to simply create the mesh from them.

6

Thanks! That is valuable insight.

My solution at the moment is to create obj data on the fly as a string and use as input to ImportMesh and call convertToFlatShadedMesh().

This is a demo application, so at the moment I only need to be able to do the visualization. Later I can look inte what is the “best” method.

BABYLON.SceneLoader.ImportMesh("", "", "data: " + objData, this.scene, function ( {...}), "","",".obj")

objData is a string.

7

ImportMesh is used to import mesh from .babylon or .glTF (among others) urls or formatted data.

In your case, you should use the link given by @Jozef_Plata and do something like:

8

Thanks! That’s awesome!

As you can see, I am a newbie to this and vary grateful for all the help i get.