如何在three.js中从一系列3D点创建一个3D多边形？

Question

我想知道如何在three.js中，通过给定的一组3D点生成一个自定义的3D多边形。这个多边形很简单，没有洞。这些点的顺序是有序的，以便它们代表相邻的顶点。我可以在2D中做到，但我不希望顶点共面。 感谢您的帮助！

- Breadcrumb

Answer 1

主要问题在于如何从一堆点创建一个三维网格。换句话说，您需要找出哪些顶点应该连接起来形成一个三角形。

这是一件非常复杂的事情（至少我很惊讶），有大量关于此的科学论文、库等等。

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

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

- Martin Schuhfuß

Answer 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);

- Normal

---

你推动面的方式并不能保证孔不会被覆盖。 - gaitat

我编辑了答案中的代码：你可以找到多边形的中点，并从中点到任意两个顶点创建面。仍然可能存在一些情况，它不会完美地工作，但对于大多数情况，它都可以使用。 - Normal

@gaitat 你有更好的解决方案吗？这对我也非常有帮助。 - Normal