Three.js计算几何面的面积（Face3）

Question

我正在使用ColladaLoader导出3D模型，每个Mesh都会创建具有多个Faces的Geometry对象。

我设法选择面孔以更改作为三角形阵列（Face3）的单个面孔的颜色和纹理。

知道我需要获取每个“面部”的面积，我知道这些面部是Face3的Triangles实例的总和。我尝试遍历每个相关的面孔，并像这样总结 a，b和c 值，但没有运气。

var sAB = Math.abs(face.a - face.b);
var sBC = Math.abs(face.b - face.c);
var sCA = Math.abs(face.c - face.a);
var s = sAB + sBC + sCA;
var a = Math.sqrt(s*(s-sAB)*(s-sBC)*(s-sCA));

如何计算Face3三角形对象的面积？

Answer 1

Face3的值a，b和c不存储实际的顶点。而是将geometry.vertices中顶点的索引存储在此处。因此，要检索三个顶点，您需要这样的东西：

var va = geometry.vertices[face.a];
var vb = geometry.vertices[face.b];
var vc = geometry.vertices[face.c];

在处理矢量时，您使用的计算无法正常工作。您需要使用THREE.Vector3中的函数（例如var v = new THREE.Vector3(); v.subVectors(va, vb);）来进行这些计算。

或者，您可以使用一个类THREE.Triangle：

var t = new THREE.Triangle(va,vb,vc);
var area = t.getArea();

Answer 2

要在数学上加上其他两个答案，如果对两个向量进行叉积运算，则所得向量的长度将是您要查找的面积的两倍。在three.js中说：

new THREE.Vector3().crossVectors(
 new THREE.Vector3().subVectors( vertexB, vertexA ),
 new THREE.Vector3().subVectors( vertexC, vertexA ),
).length() / 2 

Answer 3

您可以使用THREE.Triangle()及其.getArea()方法：

var geom = new THREE.PlaneGeometry(1, 1);

var face0 = geom.faces[0]; // you know what face, you want to get its area

var verts = geom.vertices;

var tri = new THREE.Triangle(verts[face0.a], verts[face0.b], verts[face0.c]);

var area = tri.getArea();
console.log(area);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>

Answer 4

THREE.ShapeUtils带有便捷方法getArea，您可以在其中传递2D多边形的点/顶点数组：

  

.area （轮廓）：数字

     

轮廓-2D多边形。

     

计算（2D）轮廓多边形的面积。

此方法与@pailhead中的答案大致相同，但适用于具有多个点而不是仅三个点（三角形）的多边形。

要能够将其用于不在X-Y平面（来自3D网格）中的顶点，您需要首先旋转/投影网格，使其最终在X-Y平面中。您可以使用旋转矩阵轻松地做到这一点。

---

注意：请注意，该方法使用了自相交多边形的局限性。还要检查the Limitations chapter on this "Math Open Reference" page以供参考。