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

So erstellen Sie eine Three.js 3D-line-Serie mit Breite und Dicke?

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:

So erstellen Sie eine Three.js 3D-line-Serie mit Breite und Dicke?

Kugel und Zylinder Polylinien

Eine " teure Lösung. Jedes Gelenk besteht aus einer vollen Kugel.

So erstellen Sie eine Three.js 3D-line-Serie mit Breite und Dicke?

Würfel Polylinien

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:

3D-Box Linie auf jsFiddle

So erstellen Sie eine Three.js 3D-line-Serie mit Breite und Dicke?

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...

Würde eine stückweise lineare 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

Schreibe einen Kommentar