Erstellen von Formen basierend auf Sphere Scheitelpunkten ThreeJs

Question

Hier ist, was ich versuche zu tun, habe ich bereits die Scheitelpunkte basierend auf einer Formel erstellt und Linien zwischen diesen Scheitelpunkte mit einem Threejs-Methode, und jetzt möchte ich Formen basierend darauf erstellen Ecken und verbinden sie zusammen, um sie als Kartenkacheln zu verwenden, ist mein Vorschlag die Form der Ecken y, x, z-Achse zu ändern, aber ich bin die richtige Formel für diese Ecken nicht finden können:

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

Haben Sie die THREE.Shape-Klasse überprüft? Sie können eine Form/ein Polygon basierend auf bestimmten Punkten zeichnen. Also mein Vorschlag in Ihrem Fall ist es, die benötigten Scheitelpunkte zu durchlaufen und eine Form mit ihnen zu zeichnen.

Hier erfahren Sie mehr über THREE.Shape

Wenn Sie dann eine Geometrie mit dieser Form erstellen möchten, dann fügen Sie es zu einem Netz, dann haben auch einen Blick auf THREE.ShapeGeometry