Wenn Sie die ThreeJS- Bibliothek für die Anzeige in einem Browser verwenden, ist das erste Beispiel normalerweise ein Cube oder ein anderes Elementarobjekt und wird mit den vordefinierten speziellen Klassen BoxGeometry oder SphereGeometry erstellt . Dann wird in der Regel die Verwendung von importierten Fertigmodellen und die Arbeit damit in Betracht gezogen.
Manchmal müssen Sie jedoch ein dreidimensionales Objekt erstellen, um es vollständig neu im Browser anzeigen zu können - nur mithilfe der analytischen Geometrie. Dieser Artikel beschreibt einen solchen Ansatz zum Erstellen interaktiv anpassbarer Modelle und deren anschließende Anzeige im Browser.
Wenn bei Verwendung von OpenGL und C / C ++ zur Anzeige von Objekten außerhalb des Browsers vorgefertigte Bibliotheken mit den entsprechenden Funktionen vorhanden sind, ist es ziemlich schwierig, eine geeignete Bibliothek in JavaScript zu finden . Bestehende Bibliotheken wie glMatrix zielen hauptsächlich auf geometrische Transformationen ab - Rotation, Bewegung, Skalierung von Modellen. Um dreidimensionale Objekte mit analytischen Geometriemethoden von Grund auf neu zu erstellen, sind ganz andere Funktionen erforderlich, die beispielsweise die folgenden Aktionen ausführen können: Ermitteln des Schnittpunkts von Linien in der Ebene, Ermitteln der Schnittpunkte zweier Kreise in der Ebene, Erstellen einer Ebene aus ihrem Normalenvektor und Punkt und Ermitteln des Schnittpunkts drei Flugzeuge und dergleichen. Zu diesem Zweck wurde eine kleine WebGeometry- Bibliothek erstellt.
Vor anderthalb Jahren veröffentlichte ich einen kurzen Artikel über sie. Kann gefunden werden
auf den Link .
Vor ungefähr einem halben Jahr habe ich mich entschlossen, zu diesem Thema zurückzukehren und so detailliert wie möglich mit vielen Beispielen zum Erstellen von Modellen von Grund auf mit WebGeometry zu sprechen . Zuerst nahm ich an, dass ich ungefähr drei Artikel verwalten würde, aber in diesem Prozess beschloss ich, nicht mehr Artikel zu schreiben und eine Website zu erstellen. Das Ergebnis war eine Website, die aus dreißig Lektionen bestand (ich nannte sie Kapitel):
Three.js und Geometrie
Alle dreidimensionalen Modelle, die mit ThreeJS angezeigt werden, sind so interaktiv wie möglich und direkt im Text der Site enthalten. Wenn Sie nachlesen, wie dieses oder jenes Modell erstellt wurde, können Sie die Nummer des im Text erwähnten Scheitelpunkts, den Namen der Modellfläche, die Neigungswinkel der Flächen und sogar die Koordinaten eines beliebigen Punkts des betreffenden Modells anzeigen, ohne die Site unmittelbar auf dem Modell zu verlassen Text auf der Website.
In den ersten beiden Kapiteln der Site werden einige Aspekte der Verwendung der ThreeJS- Bibliothek für zukünftige Modelle erläutert . Es wird davon ausgegangen, dass der Leser bereits mit der Erstellung einfacher ThreeJS- basierter Programme vertraut ist.
In den nächsten beiden Kapiteln wird die Arbeit mit den zweidimensionalen Funktionen der WebGeometry- Bibliothek beschrieben. Es werden viele relevante Beispiele gegeben. Alle Beispiele sind interaktiv und das Ergebnis ihrer Arbeit wird mit HTML5 Canvas angezeigt. Es kann interessant sein, sich die interaktiven Zeichnungen in den Kapiteln 14, 18, 20, 23 und 28 anzusehen.
Ab dem fünften Kapitel sehen Sie die Anwendung von WebGeometry- Bibliotheksfunktionen auf die Konstruktion komplexer dreidimensionaler Modelle. Polyeder wurden als Vorbilder gewählt, genauer gesagt als Facetten von Edelsteinen. Meiner Meinung nach gibt es keine anderen Objekte, bei denen die Anwendung von Funktionen, die Methoden der analytischen Geometrie implementieren, besser dargestellt werden kann. Diese Aussage kann aus mehreren Gründen getroffen werden.
- Alle diese Polyeder werden streng nach mathematischen Gesetzen entwickelt.
- Diese Polyeder haben keine vollständig regelmäßige Struktur, wie z. B. platonische Körper (Würfel, Tetraeder, ...), obwohl sie symmetrisch und sehr schön sind.
- Da diese Polyeder keine reguläre Struktur haben, ist es notwendig, eine Vielzahl geometrischer Berechnungen zur Bestimmung der Koordinaten ihrer Scheitelpunkte zu verwenden, anstatt uns auf eine schwierige Aufgabe im Koordinatenprogramm der Scheitelpunkte des Modells zu beschränken, die aus verschiedenen Quellen stammen.
- Sie müssen keine vorläufigen Informationen über den Schnitt kennen. Es muss nur daran erinnert werden, dass der obere Teil eines solchen Polyeders die Krone, der mittlere Teil - Gürtel und der untere Pavillon genannt wird. Die oberste Fläche wird als Plattform bezeichnet, und der niedrigste Gipfel ist eine Kalette.
Alle Polyeder (und Zeichnungen) auf der Site können durch Festlegen von Modellparametern geändert werden. Es sollte nur ein Punkt angesprochen werden. Es wird davon ausgegangen, dass fast alle Modelle (mit wenigen Ausnahmen) bei jeder Änderung der Parameterwerte konvex bleiben sollten. Einige Polyeder verändern daher in geringem Maße ihre Form. Für die Konvexitätsprüfung ist eine spezielle Funktion zuständig. Wenn Sie diese Prüfung abbrechen, können Sie völlig unerwartete Formen von Objekten erhalten (es ist schwierig, sie als Polyeder zu bezeichnen). Einige dieser Formen sind möglicherweise für Künstler von Science-Fiction-Gemälden von Interesse (siehe Screenshots am Ende der Kapitel 10 und 13).
Die meisten Funktionen der WebGeometry- Bibliothek werden mithilfe von Matrixtransformationen erstellt. Für die Erstellung von Modellen sind jedoch wahrscheinlich keine Kenntnisse über Matrizen erforderlich, da Matrizen in anderen verwendeten Funktionen verborgen sind. Zum Beispiel eine Funktion, die den Schnittpunkt von drei Ebenen definiert.
Ich werde eine Bemerkung machen, die auf den ersten Blick völlig überflüssig und zu trivial erscheint, aber vielleicht in Zukunft für jemanden nützlich sein wird. Es liegt in der Tatsache, dass Sie durch drei Punkte, die nicht auf derselben Linie liegen, nur eine Ebene zeichnen können. Angenommen, die Fläche eines Polyeders ist ein Viereck. Die Gleichung der Ebene, in der diese Fläche liegt, wird durch drei Punkte bestimmt. Die Koordinaten des vierten Punktes dieses Vierecks sind in dieser Gleichung nicht enthalten, aber der gleiche vierte Punkt gehört zu einer anderen Fläche des Polyeders, die ebenfalls berechnet wird. Es ist manchmal schwierig zu bemerken, dass das Viereck der ersten (oder zweiten) Ebene gebrochen ist, weil es visuell so aussieht, als ob dieser vierte Punkt gleichzeitig zu zwei Ebenen gehört, aber in Wirklichkeit ist dies nicht so. Dieser Fehler ist bei der Betrachtung eines bereits konstruierten Modells nur schwer zu erkennen. Sie kriecht plötzlich nach langer Zeit und völlig unerwartet heraus. Ich bin mehrmals darauf gestoßen.
Vielen Dank für Ihre Aufmerksamkeit! Sie können nicht nur die Site anzeigen, sondern auch
mein Repository .