Tetrahedral Mesh Generation with points

Alright. Could you point me in the right direction to do that? I’m lost right :(:sweat::sweat:

Sry, I’m not sure how do this.

In general, what is your use case for creating such a surface procedurally? Can’t you create the surface in a tool like Blender and then just render it with three.js?

That’s what I was thinking too. Will try that. Thank you very much for all the help. I wouldn’t even understand this if you didn’t help.

1 Like

Considering, what you show in the picture and in your codepen, your surface is just a part of a cylinder. Why not use THREE.CylinderGeometry()/THREE.CylinderBufferGeometry()? Why do you want it in such a complicated way? :slight_smile:

I’m trying to learn how to generate a mesh from a pointcloud.:sweat::neutral_face:
I’ve tried to generate a plane mesh for a pointcloud with ‘ConvexBufferGeometry’, but it renders a triangle
Do you know any other way for traingulat mesh generation on three.js?
Thanks a lot for your help. I really appreciate it.

See the Pen Tetrahedral Mesh Generation by brabbit640 (@brabbit640) on CodePen.

Tough topic :slight_smile: You know how to make your life much much interesing :wink:

The most confusing thing from your examples with point clouds that they ara looking like regular geometries from Three.js. Thus, from my point of view, it’s easier to use those geometries rather than to build something from a point cloud :slight_smile:


Yeah, I’m trying to learn, so starting with basic geometries. plane surfaces and curved surfaces.

Then maybe you can learn something from it :question:

1 Like

I m a newbie but i m wondering why not construct the faces in the loop as you form the verticies. Neighbouring points on an ij grid are neighbouring on xyz surface. In loops Keep preceding loop variables oldx old y and old z
Use these to draw new triangular faces with x y z.

Could you provide a simple example in Three.js of the idea you’ve described?

I ll have a look at modifying the code in next few days if you think of interest.

I 've copied the code across from code.io so I could have a closer look - but maybe I’m suggesting an answer to a different question though…namely I was suggesting a way to generate the surface triangulation given the original algorithm that generates the points. However, it seems the question was really about specifically generating the mesh from a _prexisting_ ‘array of points’. This being the array set up as ‘positions’ and passed as a buffer attribute.

So probably the questioner can figure out a method similar to what I wassuggesting for themselves.

What I would say is that it seems to me that it is impossible to generically generate mesh from a collection of points unless certain assumptions are made - eg. convex surface as mentioned above. It would be possible in this case to recover from the array the required neighbouring verticies in x,y space to form the triangles but then one is essentially no better off than if one had generated the faces as the positions were computed.

As a newbie I’m not clear what is the advantage of generating an array of positions and passing it in as a BufferAttribute as opposed to pushing the verticies (and faces) directly? I’d welcome enlightenment on this.

1 Like

Thank you for your input. Whole point of this question was to generate a mesh (by triangulation) from given points ( 3D scanner point cloud). But as I looked further, i realized that it’s best to do the triangulation of the points with a software like Cloudcompare, which is specifically made for that.

The problem now I’m facing is that I cannot differentiate between faces in the imported mesh to Thee.js scene. (Ex: assign different colors to each face) with a loader (PLYLoader, OBJLoader, etc…)

I’d be grateful if you could help me develop a custom PLY loader which can differentiate between faces on the loaded mesh. You can view the source of the PLYLoader.js from here

Thank you

THREE.PLYLoader() loads indexed buffer geometry. You can call .toNonIndexed() method on it to “separate” all the faces, thus you’ll get so-called “triangle soup”. Then you can add a buffer attribute for colors and then change values of its elements to set the colour of a specific face:


Yeah! this is what I want to do. Will go through the code and ask you if any thing. Thanks so much :raised_hands::+1::blush::blush:

I looked at the source and i m afraid i can t help as the level is beyond my skill level - i m a newbie with this.

It did occur to me to wonder why you need to incorprate this into the loader rather than editing the faces directly once loaded into a geometry object. Also when you say distinguish the faces … do you just mean visualise the manner of triangulation for checking and development purposes? It may suffice to use a random colour assignment on that which would avoid the need to decode the spatial positions. If you randomise all three r g b values you will have many thousands of different shades so 99.99% of neighbouring faces will be distinguished i m estimating. Should be pretty!

About triangulation.
Have a look at this topic:

1 Like