How do I create a 3D polygon from a series of 3D points in three.js?

问题

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!

回答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.

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

来源：https://stackoverflow.com/questions/41706208/how-do-i-create-a-3d-polygon-from-a-series-of-3d-points-in-three-js

标签

javascript

graphics

three.js