Generieren eines regelmäßigen Polygons mit Three.js

Question

Ich verwende Three.js, um prozedural ein N -gon basierend auf einer vom Benutzer angegebenen Anzahl von Seiten zu generieren. Das langfristige Ziel ist es, dies als ersten Schritt beim Rendern eines polyedrischen Prismas zu verwenden.

Ich verwende die Lösung here diskutierten die Eckpunkte der N -gon.

Ich benutze dann die Technik here diskutiert Gesichter auf der N -gon.

Mein erster Versuch die notwendige Geometrie Objekt ergab folgende zu erzeugen, die nichts zu machen scheint, nachdem sie zu einer Kult hinzugefügt werden:

function createGeometry (n, circumradius) { 

    var geometry = new THREE.Geometry(), 
     vertices = [], 
     faces = [], 
     x; 

    // Generate the vertices of the n-gon. 
    for (x = 1; x <= n; x++) { 
     geometry.vertices.push(new THREE.Vector3(
      circumradius * Math.sin((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      circumradius * Math.cos((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      0 
     )); 
    } 

    // Generate the faces of the n-gon. 
    for (x = 0; x < n-2; x++) { 
     geometry.faces.push(new THREE.Face3(0, x + 1, x + 2)); 
    } 

    geometry.computeBoundingSphere(); 

    return geometry; 
} 

Nachdem zu lange damit liebäugelt, entdeckte ich, die ShapeGeometry-Klasse. Dies verwendet den gleichen Vertex-Algorithmus wie im obigen Beispiel, aber diese macht richtig nach zu einem Mesh hinzugefügt werden:

function createShapeGeometry (n, circumradius) { 

    var shape = new THREE.Shape(), 
     vertices = [], 
     x; 

    // Calculate the vertices of the n-gon.     
    for (x = 1; x <= sides; x++) { 
     vertices.push([ 
      circumradius * Math.sin((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      circumradius * Math.cos((Math.PI/n) + (x * ((2 * Math.PI)/ n))) 
     ]); 
    } 

    // Start at the last vertex.     
    shape.moveTo.apply(shape, vertices[sides - 1]); 

    // Connect each vertex to the next in sequential order. 
    for (x = 0; x < n; x++) { 
     shape.lineTo.apply(shape, vertices[x]); 
    } 

    // It's shape and bake... and I helped!   
    return new THREE.ShapeGeometry(shape); 
} 

Was mit dem Geometrie Beispiel falsch ist, die mit dem ShapeGeometry Beispiel aufgelöst wird?

Ich glaube nicht, dass es ein Problem mit der Kamera oder Positionierung ist, weil das Ersetzen der komplexen Vertexberechnungen mit einfacheren ganzen Zahlen ein Polygon ohne ein Problem erzeugt, vorausgesetzt die Werte sind sinnvoll.

Der Grund, warum ich frage, ist, weil ich, wie ich anfangs erwähnt habe, möchte ich schließlich dies als den ersten Schritt beim Rendern eines Polyeders verwenden. ShapeGeometry-Objekte können extrudiert werden, um ihnen Tiefe zu geben, aber selbst mit den Optionen, die Three.js zur Verfügung stellt, ist dies auf lange Sicht nicht genug für meine Bedürfnisse, da die benötigten Polyeder unregelmäßiger werden.

Irgendwelche Gedanken?

Answer 1

Ihre Funktion funktioniert wie erwartet.

Blick auf diese Geige http://jsfiddle.net/Elephanter/mUah5/

there is a modified threejs fiddle with your createGeometry function 

So haben Sie Problem an anderer Stelle, nicht createGeometry Funktion

Answer 2

Sie können Prismen erstellen THREE.CylinderGeometry verwendet; für ein n-seitiges Prisma, könnten Sie

verwenden

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight 
var nPrism = new THREE.CylinderGeometry(30, 30, 80, n, 4); 

Sie auch CylinderGeometry verwenden können, Pyramiden und Stümpfe zu schaffen; Weitere Beispiele für Einbau-Formen können Sie überprüfen:

http://stemkoski.github.io/Three.js/Shapes.html

Da Sie auch klingen wie Sie in allgemeinerer Polyeder interessiert sein, können Sie auch prüfen wollen:

http://stemkoski.github.io/Three.js/Polyhedra.html

, die Modelle der Platonischen Körper, Archimedische Körper, Prismen, Antiprismen und Johnson Festkörper enthält; In diesem Programm sind die Polyeder jedoch "dick", da sie Kugeln für Ecken und Zylinder für Kanten verwenden.

Hoffe, das hilft!