Wie erstelle ich ein 3D-Polygon aus einer Reihe von 3D-Punkten in three.js?

Question

Ich frage mich, was wäre der beste Weg, um ein benutzerdefiniertes 3D-Polygon mit einem Array von 3D-Punkten in three.js zu generieren. Es ist ein einfaches Polygon ohne Löcher. Die Punkte sind so geordnet, dass sie benachbarte Ecken repräsentieren. I can do it in 2D, but I don't want the vertices to be coplanar. Vielen Dank für Ihre Hilfe!

Answer 1

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

Answer 2

Das Hauptproblem hier ist, wie man ein 3D-Mesh aus einer Reihe von Punkten erstellt. Mit anderen Worten: Sie müssen herausfinden, welche der Scheitelpunkte verbunden werden sollten, um ein Dreieck zu bilden.

Dies ist eine überraschend komplizierte Sache zu tun (nun, zumindest war ich überrascht) und es gibt Tonnen von wissenschaftlichen Arbeiten, Bibliotheken und so weiter.

In Ihrem Fall ist es jedoch ein bisschen einfacher, da Sie schon ungefähr wissen, wie die Scheitelpunkte verbunden werden sollten. Ich würde Ihnen empfehlen, einen Blick auf die earcut-library oder libtess.js, die beide in der Lage sein sollten, die Triangulationen erstellen, die Sie benötigen.

Sobald Sie das haben, können Sie grob gehen mit @lior-trau's Empfehlung für das Erstellen der Geometrie aus dem Ergebnis.