Triangulation of three-dimensional points with K vertices per face

Question

I work with Three.js. I have a set of 3D points (x, y, z) and a set of faces. One face consists of K points . It can also be convex as concave. I did not find anything that could help me in the Three.js documentation. One solution might be to triangulate these shapes, but so far I have not found a simple 3D triangulation algorithm.

Another solution would do something like this:

var pointsGeometry = new THREE.Geometry(); pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0)); pointsGeometry.vertices.push(new THREE.Vector3(10, 10, 0)); pointsGeometry.vertices.push(new THREE.Vector3(0, 10, 0)); pointsGeometry.vertices.push(new THREE.Vector3(1, 3, 0)); pointsGeometry.vertices.push(new THREE.Vector3(-1, 3, 0)); pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0)); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var mesh = new THREE.Shape/ShapeGeometry/Something(pointsGeometry, material); group.add(mesh); scene.add(group); 

I have a lot of these shapes that build a closed surface.

Any suggestion?

Thank you for attention. Have a nice day.

Answer 1

As you pointed out, there are two ways to achieve this:

• use a 3D triangulation algorithm (not provided by Three.js);
• use the 2D triangulation algorithm commonly used for Three.js Shape objects with some transformations applied to each face of the geometry.

The latter seems cool, but unfortunately, as I tried, I realized that this is not trivial. I came up with something similar to what Paul-Jan said:

For every facet of your geometry:

• Calculate the center of gravity of the face;
• Calculate a normal face;
• Calculate face matrix;
• Project 3D points on the two-dimensional plane of the face;
• Create a geometry (triangulated using the Shape triangulation algorithm);
• Apply a face matrix to the newly created geometry.
• Create a Mesh and add it to Object3D (I tried to combine all the geometries into 1, but with a ShapeBufferGeometry error)

Check this script .

Follow the winding order of your vertices or put THREE.Material.side on THREE.DoubleSide to prevent face removal.

Answer 2

I think you may need to revise the Three.js documentation and the Shape object to a specific one. The sample code on this page uses bezierCurveTo , but if you use lineTo , you can feed it with your own sequence of points and create concave polygons (including holes).