如何从 three.js 中的一系列 3D 点创建 3D 多边形？答案

【问题标题】：How do I create a 3D polygon from a series of 3D points in three.js?如何从 three.js 中的一系列 3D 点创建 3D 多边形？
【发布时间】：2017-06-02 01:14:29
【问题描述】：

我想知道在给定three.js 中的 3D 点数组的情况下生成自定义 3D 多边形的最佳方法是什么。它是一个没有孔的简单多边形。这些点是有序的，因此它们代表相邻的顶点。I can do it in 2D, but I don't want the vertices to be coplanar. 感谢您的帮助！

【问题讨论】：

标签： javascript graphics 3d three.js

【解决方案1】：

这里的主要问题是如何从一堆点创建 3D 网格。换句话说：您需要弄清楚应该连接哪些顶点以形成三角形。

这是一件非常复杂的事情（嗯，至少我很惊讶），并且有大量的科学论文、图书馆等等。

但是，在您的情况下，它有点简单，因为您已经大致知道顶点应该如何连接。我建议您查看earcut-library 或libtess.js，它们都应该能够创建您需要的三角剖分。

一旦你有了它，你就可以大致按照@lior-trau's 的建议来了解如何从结果中创建几何图形。

【讨论】：

【解决方案2】：

     var geo = new THREE.Geometry();
     var mat = new THREE.MeshBasicMaterial();
     var middlePoint = new THREE.Vector3();
     for(var i=0;i<dots.length;i++){
        middlePoint.add(dots[i].position) 
        geo.vertices.push(new THREE.Vector3(dots[i].x,dots[i].y,dots[i].z));
     }
     middlePoint.divideScalar(dots.length);
     geo.vertices.push(middlePoint);

     for(var i=0;i<dots.length;i++){
        middlePoint.add(dots[i].position) 
        if(i >0){
          geo.faces.push(new THREE.Face3( geo.vertices.length-1,dots[i],dots[i-1]));
        }
     }

    var mesh = new THREE.Mesh(geo,mat);

【讨论】：

推面的方式并不能保证孔最终不会被覆盖。
我编辑了答案中的代码：您可以找到中间点并创建从中间到多边形中任意两个顶点的面。仍然可能在某些情况下它不会完全好，但在大多数情况下它会起作用。
@gaitat 你有更好的解决方案吗？这对我也很有帮助。