Erstellen eines Ring-/Kreissektors mit dem CanvasRenderer

Versuchen Sie, mit Three.JS und dem CanvasRenderer eine Anzahl von Kreis-/Ringsegmenten zu erstellen.

Example using THREE.Shape and THREE.ShapeGeometry here: http://jsfiddle.net/25U8E/1/

Die Triangulation sieht für mich falsch aus und als ich versuchte, die Vertices zu verschieben, indem ich geometry.vertices [n] .x etc. direkt ändere, verdunkelt sich die DREI.Form, die ich verwende, und wird weniger glatt.

Gibt es einen besseren Weg, um einen Sektor zu erstellen - einen Sektor, in dem ich die Eckpunkte nachträglich modifizieren kann?

0
Entschuldigung, das war ein bisschen vage - es war sehr spät. Dieser i.imgur.com/iI4B6yx.png Composite-Screenshot zeigt, was ich meine. Der oberste Sektor ist der Startpunkt der App und der untere Sektor befindet sich nach einigen Iterationen, in denen die geometry.vertices verschoben werden, um die Größe des Sektors zu ändern. Der Code zum Verschieben jedes Verts ist der gleiche wie der, mit dem sie ursprünglich erstellt wurden, so dass ich nicht denke , dass es sich um einen mathematischen Fehler handelt. Vielle
hinzugefügt der Autor speedwell, Quelle
jsfiddle.net/NWJQk Ich habe es mit THREE.RingGeometry versucht. Wenn ich THREE.DoubleSide für das Material nicht verwende, wird das Segment nicht korrekt dargestellt. Wenn ich das tue, gibt es viele z-Kämpfe. Gibt es noch etwas, das ich einstellen muss?
hinzugefügt der Autor speedwell, Quelle
Danke für die Klarstellung.
hinzugefügt der Autor speedwell, Quelle
Probieren Sie THREE.RingGeometry (150, 300, 16, 2, 0, Math.PI/4); und erklären Sie dann, was Sie mit "ändern Sie die Scheitelpunkte" und "weniger glatt" meinen.
hinzugefügt der Autor WestLangley, Quelle
Huch! Das ist ein Fehler in RingGeometry . Betrachten Sie es im Drahtmodellmodus, und Sie können sehen, dass die linken und rechten Kanten mit Flächen verbunden sind. Aber RingGeometry sollten Sie verwenden - wenn es funktioniert.
hinzugefügt der Autor WestLangley, Quelle

1 Antworten

Nicht sicher, ob dies die Stackoverflow-y-Sache ist, aber hier geht es:

Der richtige Weg, um einen Ringsektor zu erstellen, den ich brauche, ist die RingGeometry-Klasse wie folgt:

THREE.RingGeometry (150, 300, 16, 2, 0, Math.PI/4);

Es enthält einen Fehler, der bedeutet, dass einige der Verts falsch sind - hier abgebildet: http://jsfiddle.net/NWJQk/ - Wenn es sich dreht, sehen Sie, dass die Rückseite falsch ist.

Diese Geige verweist auf die URL für die neueste Version von Three.JS. Wenn sie also funktioniert, bedeutet das, dass der Fehler behoben und freigegeben wurde.

Edit: Clearer illustration of what's failing using wireframe: http://jsfiddle.net/NWJQk/3/

0
hinzugefügt