So erstellen Sie eine Three.js 3D-line-Serie mit Breite und Dicke?
Ist es ein Weg, um eine Three.js 3D-line-Serie mit Breite und Dicke?
Obwohl die Three.js line-Objekt unterstützt linewidth, wird dieses Attribut noch nicht unterstützt wird in allen Browsern auf allen Plattformen in WebGL.
Hier stellen Sie linewidth in Three.js:
var material = new THREE.LineBasicMaterial({
color: 0xff0000,
linewidth: 5
});
Den Three.js ribbon-Objekt - die hatten Breite - wurde vor kurzem gelöscht.
Den Three.js Rohr-Objekt erzeugt 3D-Extrusionen, sondern als Bezier-basierte - die Linien passen nicht durch die Kontrollpunkte.
Kann jeder denken, der eine Methode der Zeichnung ein Linie-Serie (Polylinien, Handlungsstränge) Three.js das hat eine Art Benutzer-definierbare 'bulk' - wie Breite, Stärke oder der radius?
Dieser Frage eine Neuformulierung der Frage:
Das Extrudieren einer Kurve in three.js.
Gegeben, dass ich nicht denke, dass es eine leicht verfügbare Methode, ich würde gerne teilnehmen, in einer Anstrengung, um eine einfache Funktion, die eine Antwort auf diese Frage.
Aber eine Antwort, die Punkte zu einem vorhandenen brauchbare Methode wäre cool...
Als WestLangley schlägt vor, eine mögliche Lösung beinhaltet die Polylinie wird der konstant-pixel-Breite - da ist derzeit mit der Three.js canvas-renderer.
Einen Vergleich der beiden Renderer ist hier dargestellt:
Canvas und WebGL-Linien im Vergleich über GitHub Pages
Canvas und WebGL-Linien im Vergleich über jsFiddle
Ist eine Lösung, wo man angeben konnte linewidth und ähnliche Ergebnisse traten auf beiden Renderern wäre sehr cool.
Gibt es jedoch noch andere Wege des Denkens von 3D-Linien, wo die Linien sind tatsächliche physische Konstrukte. Sie werfen Schatten, Sie reagieren auf Ereignisse. Diese müssen ebenfalls geprüft werden.
Hier sind die links zu den GitHub-Seiten mit zwei demos von Linien, die aus mehreren meshes:
Eine " teure Lösung. Jedes Gelenk besteht aus einer vollen Kugel.
Meine Vermutung ist, dass die Gebäude entweder als glatte einzelnen Maschen sein wird, komplexe Probleme zu lösen. So in der Zwischenzeit hier ist ein link zu einer teilweisen Visualisierung von 3D-Linien, die Breite und die Höhe:
Ziel ist es zu code 'mit einem geringen Grad an Komplexität - in anderen Worten - für dummies". Also eine 3D Linie sollte so einfach und so vertraut wie das hinzufügen einer Kugel oder einem Würfel. Geometrie + material = Netz > Szene. Und die geometrie sollte sehr sparsam in Bezug auf die Schaffung von vertices und faces.
Sollten die Linien haben die Breite und Höhe. Immer in der Y-Richtung. Die demo zeigt dies. Was die demo nicht zeigt, ist die Ecken als Gehrung schön...
TubeGeometry
ausreichen? (Sie würde haben, um zu vermeiden, scharfe Ecken).Hi WestLangley. TubeGeometry ist in der Tat ein mächtiges Werkzeug, aber es muss nicht einmal ein Rechteck zeichnen. Kontrollpunkte sind nicht Ecken. Und es gibt eine gute Anzahl von graphischen Dinge, wo die Linie mast mast durch die vertex-oder ist es nicht glaubwürdig...
Ich bin mir auch nicht sicher, was du meinst mit 'piecewise linear'. Können Sie beschreiben, dieser Begriff mehr voll?
(1) en.wikipedia.org/wiki/Piecewise_linear_curve. (2) Nach ein bisschen denken, Rohr-geometrie vorgenommen werden kann, um die Arbeit mit einigen Veränderungen, aber es ist übertrieben. Vielleicht eine verknüpfte Kette von rechteckigen sprites (so dass Sie immer in Richtung der Kamera), mit einem kreisförmigen sprite an jedem Kontrollpunkt zu vertuschen, die gemeinsame.
Vielleicht eine verknüpfte Kette von rechteckigen sprites. Gut! Das funktioniert gut in einigen Situationen. Aber die wirkliche brauchen, für den stückweise linearen Polygonzug - oder Polylinie mit Breite und Dicke, das geht von 3D-vertex-zu-3D-vertex. Da Sie daran interessiert sind, ich werde schreiben, eine detaillierte Spezifikation und fügen Sie ein jsFiddle oder zwei in den nächsten Tag oder so...
InformationsquelleAutor Theo | 2013-12-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kochte ich eine mögliche Lösung, die ich glauben, erfüllt die meisten deiner Anforderungen:
http://codepen.io/garciahurtado/pen/AGEsf?editors=001
Das Konzept ist ziemlich einfach: macht jede beliebige geometrie in die "wireframe-Modus", dann bewerben Sie sich eine full-screen-GLSL-shader, um es hinzuzufügen Dicke an die wireframe-Linien.
Wird der shader inspiriert von den blur-Shader in die ThreeJS-Distribution, die im wesentlichen eine Kopie des Bildes ein paar mal entlang der horizontalen und vertikalen Achse. Ich automatisierte, Prozess-und machte die Anzahl der Kopien, die ein Benutzer angegebenen parameter, während sichergestellt wird, dass die Kopien wurden Versatz von 1 pixel.
Habe ich eine 3D-cube-Netz in meiner demo (mit der ortho-Kamera), aber es sollte trivial sein, es zu konvertieren, um eine poly-Linie.
Das wirkliche Fleisch und Kartoffeln dieses Ding ist in der custom shader (fragment-shader Teil):
Vorteile:
Nachteile:
InformationsquelleAutor Garcia Hurtado
Als eine mögliche Lösung. Sie könnte nehmen Sie Ihre 3d-Punkte, dann verwenden Sie
THREE.Vector3.project
Methode, um herauszufinden, screen-space-Koordinaten. Dann nutzen Sie einfach die Leinwand und es istlineTo
undmoveTo
Operationen. Canvas-2d-Kontext unterstützt variable Linienstärke.Auch, ich glaube nicht, dass Sie verwenden können, die gleiche Leinwand, so dass es hätte zu einem layer (einer anderen Leinwand) über Ihren gl rendering context Leinwand.
Wenn Sie selten Kamera verändert - es ist auch möglich zu konstruieren line Polygone und aktualisieren Sie es die vertex-Position, basierend auf der Kamera zu verwandeln. Für orthografische Kamera, das würde am besten funktionieren, als nur Drehungen erfordern würde, die vertex-position-manipulation.
Schließlich, Sie könnten deaktivieren Sie die Leinwand-clearing und zeichnen Sie die Linien mehrmals mit Versatz in einem Kreis oder einer box. Danach können Sie wieder aktivieren, ausgleichen. Dies würde erfordern einige zusätzliche draw-Operationen, aber es ist wahrscheinlich das die meisten skalierbaren Ansatz.
Den Grund Linien nicht so funktionieren, wie Sie erwarten würden, aus der box ist darauf zurückzuführen, wie WINKEL funktioniert, es wird in Chrome und in Firefox meines Wissens, es emuliert OpenGL über DirectX. Die Jungs aus WINKEL Stand, dass die WebGL-Spezifikation erfordert nur Unterstützung von Linien-Dicke bis zu 1, so dass Sie sehen es nicht als einen Fehler und nicht beabsichtigen, es zu "reparieren". Die Linienstärke sollte auf nicht-windows-Betriebssystemen, obwohl, wo-WINKEL wird nicht verwendet.
InformationsquelleAutor travnik