Creating Complex Polygons and Calculating Area in Three.js: Seeking Guidance
Hello everyone,
I’ve been using Three.js (fiber) for a little while now, and I’m posting this message because I’d like to create a feature, but I’m not sure how to go about it. Here it is:
I want to be able to create complex polygons by clicking at various points on a mesh that serves as my floor, and then calculate their area, like in Geogebra.
In a nutshell:
The user clicks once to create the starting point of the polygon.
They click at other locations to continue the polygon.
Once they’ve finished, they return to the starting point and click, at which point a polygon is created, and it’s possible to determine its area. I’ve created some diagrams to illustrate.
You can calculate the signed area and then just drop out the sign. You only need the vertices (ordered either clockwise or counterclockwise around the polygon perimeter).
First of all, thank you for your response, and for your second link ;), however, I need to know the area but also to build the shape as a mesh, and for that, I have to generate the faces of the triangles that will make up my polygon. Furthermore, for example, in GeoGebra, we can see the shape being filled in as we take the points, so maybe they have a way to create the polygon gradually. What do you think?
I assumed that the main question is how to calculate the area. The calculation of area does not need triangulation.
If, however, you have the polygon triangulated, you can calculate its area as the sum of areas of all triangles. So, yes, it is possible to do it this way, but this uses more calculations than the signed area.
If you want to create the intermediate shapes as a meshes, while the user still constructs the polygon, you can use THREE.ShapeGeometry which automatically triangulates a shape, so you do not have to do it by yourself. This somewhat contradicts with your first post, which says that the polygon is constructed at the end:
Indeed, I didn’t specify it in the first message, and I apologize for that, but ultimately the purpose of the first message is still to create complex polygons. So, do I actually need to use triangulation to create my polygon as I described it?
You can use THREE.ShapeGeometry and it will automatically do triangulation, so you do not have to do it by yourself. Here it what it looks like when using a ShapeGeometry to define a polygon with mouse clicks:
The area can be calculated irrespective on whether the polygon is triangulated or not. If you insist on using triangulation for the area, then extract triangles from the geometry and compute the area based on their vertices.
