Creating shapes based on Sphere vertices ThreeJs

Question

Here's what i am trying to do, i already have created the vertices based on a formula, and connected lines between these vertices using a threejs method, and now i want to create shapes based on these vertices and connect them together to use them as map tiles, my suggestion is to modify the shape's vertices y, x, z axis, but i'm not able to find the right formula for these vertices:

mesh1 = new THREE.Mesh(); // sphere container
mesh2 = new THREE.Mesh(); // sphere container
mesh3 = new THREE.Mesh(); // sphere container

var R = 5.6; // radius
var LON = 32; var LAT = 16; // approximation

var PILAT = Math.PI/LAT;
var PILON = 2 * Math.PI/LON;

var cos1,cos2,sin1,sin2,t1,t2;
var y1,y2,r1,r2,t1,t2;

var plotG = new THREE.PlaneGeometry(0.06, 0.06);
var lineColor = new THREE.LineBasicMaterial({color: 0xaaaaaa});
var geometry = new THREE.Geometry();

var oldLATCounter = 0;
var oldLONCounter = 0;
for (var i=0; i<LAT; i++){
  t1 = Math.PI - i*PILAT;
  t2 = Math.PI - (i+1)*PILAT;

  oldT1 = Math.PI - oldLATCounter*PILAT;
  oldT2 = Math.PI - (oldLATCounter+1)*PILAT;

  y1 = Math.cos(t1); // 1 latitudes radius y-position;
  y2 = Math.cos(t2); // 2 latitudes radius y-position;

  oldY1 = Math.cos(oldT1); // 1 latitudes radius y-position;
  oldY2 = Math.cos(oldT2); // 2 latitudes radius y-position;

  r1 = Math.abs( Math.sin(t1) ); // 1 latitudes radius;
  r2 = Math.abs( Math.sin(t2) ); // 2 latitudes radius;

  oldR1 = Math.abs( Math.sin(oldT1) ); // 1 latitudes radius;
  oldR2 = Math.abs( Math.sin(oldT2) ); // 2 latitudes radius;

  for (var j=0; j<LON; j++) // walk longitudes segments
  {
    t1 = j*PILON;
    t2 = (j+1)*PILON;

    oldT1 = oldLONCounter*PILON;
    oldT2 = (oldLONCounter+1)*PILON;

    cos1 = Math.cos(t1);
    cos2 = Math.cos(t2);
    sin1 = Math.sin(t1);
    sin2 = Math.sin(t2);

    oldCos1 = Math.cos(oldT1);
    oldCos2 = Math.cos(oldT2);
    oldSin1 = Math.sin(oldT1);
    oldSin2 = Math.sin(oldT2);

    geometry.vertices.push(
      new THREE.Vector3( r1*cos1, y1, r1*sin1 ),
      new THREE.Vector3( r2*cos1, y2, r2*sin1 ),
      new THREE.Vector3( r2*cos2, y2, r2*sin2 )
    );

    geometry.dynamic = true;


    var m1 = new THREE.Mesh( plotG );
    m1.position.set(r2*cos2, y2, r2*sin2);

    // m1.geometry.vertices[0].y = 0;
    // m1.geometry.vertices[0].x = 0;
    // m1.geometry.vertices[0].z = 0;
    // m1.geometry.vertices[1].y = 0;
    // m1.geometry.vertices[1].x = (oldR2*oldCos2) - (r2*cos2);
    // m1.geometry.vertices[1].z = -(oldR2*oldSin2);
    // m1.geometry.vertices[2].y = oldTy2;
    // m1.geometry.vertices[2].x = 0;
    // m1.geometry.vertices[2].z = 0.1;
    // m1.geometry.vertices[3].y = 0;
    // m1.geometry.vertices[3].x = 0;
    // m1.geometry.vertices[3].z = 0.1;

    mesh2.add(m1.clone());

    oldLONCounter = j;
  }
  oldLATCounter = i;
}

mesh2.add( new THREE.Line( geometry, new THREE.LineBasicMaterial({color: 0xaaaaaa}) ) );
scene.add(mesh2);
mesh2.scale.set(R,R,R);
mesh2.position.x =  0;

This is the sphere i'm working on

Answer 1

Have you checked the THREE.Shape Class? It let you draw a shape/polygon based on some given points. So my suggestion in your case is to loop through the vertices you need and draw a shape with them.

Here you can find out more about THREE.Shape

If you then want to create a geometry with that shape, to then add it to a mesh, then also have a look at THREE.ShapeGeometry