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 th

Solution 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.

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