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

Question

I wonder what would be the best way to generate a custom 3D polygon given an array of 3D points in three.js. It is a simple polygon without holes. The points are ordered so that they represent neighboring vertices. I can do it in 2D, but I don't want the vertices to be coplanar. Thank you for your help!

Answer 1

The main problem here is how to create a 3D mesh from a bunch of points. In other words: you need to figure out which of the vertices should be connect to form a triangle.

This is an surprisingly complicated thing to do (well, at least I was surprised) and there are tons of scientific papers, libraries and so on about that.

However, in your case it is a bit simpler as you already know roughly how the vertices should get connected. I would recommend you have a look at the earcut-library or libtess.js , both of which should be able to create the triangulations you need.

Once you have that, you can roughly go with @lior-trau's recommendation for how to create the geometry from the result.

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