Einführung
Dieser Artikel erklärt hauptsächlich die relevanten Konzepte von drei.js und hilft den Lesern, ein relativ vollständiges Verständnis von drei.Js und verwandten Wissen zu entwickeln.
Das Web hat sich in den letzten Jahren rasch entwickelt. Mit der Popularität von HTML5 werden die Leistungsfähigkeiten von Webseiten immer leistungsfähiger. Es gibt bereits viele komplexe Animationen und exquisite Effekte auf der Webseite.
Aber die Leute sind immer gierig. Was kann also noch noch getan werden? Eine davon ist es, Hochleistungs-3D-Grafiken auf Webseiten über WebGL zu zeichnen.
OpenGL, Webgl bis drei.js
Viele Menschen haben wahrscheinlich von OpenGL gehört, der am häufigsten verwendeten plattformübergreifenden Grafikbibliothek.
WebGL ist ein von OpenGL entworfenes Web-orientiertes Grafikstandard, das eine Reihe von JavaScript-APIs bereitstellt, über die das Rendering von Grafiken genutzt wird, um eine höhere Leistung zu erzielen.
Three.js ist eine benutzerfreundliche Grafikbibliothek, die durch Einkapselung und Vereinfachung der WebGL-Oberfläche gebildet wird.
Einfach ausgedrückt: WebGL kann als Schnittstelle vom Browser angesehen werden. In JavaScript können diese APIs direkt zum Zeichnen von 3D -Grafiken verwendet werden. und drei.js hilft uns, diese Schnittstellen zu verkapulieren, um nützlicher zu sein.
Vergleich von Webgl und drei.js
Warum brauchen wir immer noch drei.js?
Dies liegt daran, dass der Schwellenwert für WebGL relativ hoch ist und relativ mathematisches Wissen erfordert. Obwohl WebGL eine Front-End-API bietet, sind WebGL- und Front-End-Entwicklung im Wesentlichen zwei verschiedene Richtungen, und es gibt kaum Wissensüberlappung. Die Relevanz ist, dass sie alle auf der Webplattform sind und JavaScript verwenden. Ein Front-End-Programmierer kann mit der analytischen Geometrie vertraut sein, aber es sollte nur sehr wenige sein, die immer noch mit linearen Algebra vertraut sind (zum Beispiel versuchen Sie, eine inverse Transponierungsmatrix zu finden?), Ganz zu schweigen davon, dass die physikalische Bedeutung von Matrixoperationen im Gebrauch hervorgehoben wird, was auch im Unterricht relativ fehlt.
Daher ist es für Front-End-Ingenieure ziemlich schwierig, in kurzer Zeit mit WebGL zu beginnen.
Daher hat drei.js eine sehr gute Verkapselung der von WebGL bereitgestellten Schnittstelle, die viele Details vereinfacht und die Lernkosten erheblich senkt. Und in WebGL gibt es kaum einen Verlust der Flexibilität.
Ausgehend von drei.js ist es wert, empfohlen zu werden, sodass Sie nach einer kürzeren Studie die meisten Nachfrageszenarien ausgesetzt sind.
Drei.js Lernprobleme
Der Einstieg mit drei.js ist relativ einfach, aber wenn wir wirklich lernen, werden wir ein peinliches Problem finden: Es gibt nur sehr wenig verwandte Lernmaterialien.
Normalerweise hat diese beliebte Bibliothek sehr vollständige Dokumente und oft die beste Möglichkeit, aus offiziellen Dokumenten oder offiziellen Einführungs -Tutorials zu lernen. Aber drei sind nicht, seine Dokumentation ist für Anfänger zu präzise.
Der Beamte liefert jedoch eine sehr große Vielzahl von Beispielen, und fast alle Verwendung, die Sie benötigen, spiegeln sich in einem bestimmten Beispiel wider. Diese Beispiele eignen sich jedoch nicht für den Einstieg, sondern für ein weiteres Lernen nach dem Start.
Hier sind einige relativ gute Tutorials:
Drei.js Erste Anleitung
Dies ist ein gutes leichtes Einführungs -Tutorial für drei.js. Der Autor hat einen sehr guten Schreibstil und das Grundwissen wird genau und leicht verständlich erklärt.
Drei.JS -Entwicklungshandbuch (erste chinesische Version)
Drei.JS- zweite Ausgabe lernen
Erlernen von drei.Js: Die JavaScript 3D -Bibliothek für WebGL ist das wenige und beste Einführungsbuch von Drei.Js, das die verschiedenen Funktionen von drei.Js auf umfassendere Weise erklärt.
Wenn Sie die Fähigkeit haben, wird empfohlen, die zweite Ausgabe der 2015 veröffentlichten englischen Version zu lesen, die sich sehr von den aktuellen drei.js unterscheidet.
Die chinesische Version wird aus der ersten Ausgabe des im Jahr 2012 veröffentlichten Originalbuchs übersetzt. Die meisten Konzepte sind anwendbar, aber viele Details haben sich geändert.
Drei.js Tutorial
Dies ist eine Übersetzung eines ausländischen Tutorials mit insgesamt sechs Artikeln . Ich erkläre nicht viel, aber es geht mehr darum, wie man jede grundlegende Funktion nutzt. Es eignet sich besser für Schüler mit einer Grafikstiftung.
Natürlich reichen diese Materialien während des tatsächlichen Lernprozesses definitiv nicht aus. Bei Problemen müssen Sie die Materialien selbst überprüfen. Ich möchte Sie jedoch daran erinnern, dass drei.js ziemlich häufig aktualisiert werden, jetzt ist es die R80 -Version. Da R1 im April 2010 veröffentlicht wurde, ist dies die 72. Version (einige Versionsnummern in der Mitte wurden übersprungen). Daher sind einige der im Internet gefundenen Informationen möglicherweise nicht für die aktuelle Version geeignet . Sie müssen daher auf die Identifizierung achten (die zuvor empfohlenen Informationen haben auch mehr oder weniger solche Probleme).
Einige Konzepte in drei.js
Um 3D -Grafiken auf dem Bildschirm anzuzeigen, ist die Idee im Allgemeinen wie folgt:
Aufbau eines dreidimensionalen Raums
In drei wird als Szene (Szene) bezeichnet, um einen Beobachtungspunkt auszuwählen und die Beobachtungsrichtung/den Beobachtungsrichtung usw. zu bestimmen, usw.
Drei nennt es die Kamera (Kamera), um der Szene Objekte zur Beobachtung hinzuzufügen
Es gibt viele Arten von Objekten in drei, einschließlich Netz, Linie, Punkten usw. Sie alle erben von der Object3D -Klasse die beobachtete Szene in einen bestimmten Bereich auf dem Bildschirm.
Verwenden Sie dazu Renderer in drei
Schauen wir uns diese Konzepte im Detail im Detail an.
Szene
Die Szene ist ein Behälter aller Objekte und entspricht auch der dreidimensionalen Welt, die wir schaffen.
Kamerakoordinatensystem
Die Kamera ist Beobachter in der dreidimensionalen Welt. Um diese Welt zu beobachten, müssen wir zunächst die Position im Weltraum beschreiben.
Das gängige rechte Koordinatensystem wird in drei verwendet.
Dreidimensionale Projektion
Es gibt zwei Arten von Kameras in drei, nämlich die orthografische Projektionskamera Drei.Otographische Kamera und die Perspektive -Projektionskamera Drei.
Der Unterschied zwischen orthogonaler Projektion und Perspektivprojektion ist in der obigen Abbildung dargestellt. Das linke Bild ist eine orthogonale Projektion. Das vom Objekt emittierte Licht wird parallel zum Bildschirm projiziert, und die Felder weit und in der Nähe haben die gleiche Größe. Das richtige Bild ist eine Perspektivprojektion, die im Ferne und Klein und klein groß ist und unserem üblichen Gefühl entspricht, Dinge zu betrachten.
Wikipedia: 3D -Projektion
Orthogonale Projektionskamera
Hinweis: Der "Standpunkt" in der Abbildung entspricht der Kamera in drei.
Hier fügen wir ein Konzept des visuellen Körpers hinzu: visueller Körper ist ein geometrischer Körper, nur Objekte im visuellen Körper werden von uns gesehen, und Objekte außerhalb des visuellen Körpers werden abgeschnitten. Dies dient dazu, unnötige Operationen zu entfernen.
Der Sichtkörper der orthografischen Projektionskamera ist ein Quader. Der Konstruktor von orthographiccamera ist wie folgt: OrthographieCamera (links, rechts, oben, unten, in der Nähe, weit)
Die Kamera selbst kann als Punkt angesehen werden, während der linke den Abstand zwischen der linken Ebene und der Kamera in der linken und rechten Richtung angibt. Gleiches gilt für die anderen Parameter. Daher definieren die sechs Parameter die Positionen der sechs Gesichter des Betrachtungskörpers.
Es kann ungefähr angenommen werden, dass die Objekte im Betrachtungsgremium parallel zur nahen Ebene projiziert werden und dann die Bilder in der nahen Ebene auf den Bildschirm gerendert werden.
Perspektive Projektionskamera
Die Sehkörper der Perspektivenprojektionskamera ist eine Plattform mit vier Kanten, und sein Konstruktor lautet wie folgt: PerspectiveCamera (FOV, Aspekt, in der Nähe, weit)
FOV entspricht der Perspektive in der Abbildung, die der Winkel zwischen der oberen und unteren Seite ist. Aspekt ist das Seitenverhältnis der Nahebene. Hinzufügen der nahezu planischen Abstand in der Nähe und der fernen Entfernung weit, die einzige Möglichkeit, die visuelle Szene zu bestimmen.
Perspektive Projektionskameras stimmen sehr überein mit unserem üblichen Gefühl, Dinge zu beobachten. In den meisten Fällen verwenden wir Perspektivprojektionskameras, um 3D -Effekte zu zeigen.
Objekte
Mit einer Kamera muss man sich etwas ansehen, oder? Fügen Sie der Szene einige Objekte hinzu.
Es gibt viele Objekte zur Anzeige in drei, die alle aus der Object3D -Klasse geerbt werden. Hier schauen wir uns hauptsächlich Mesh und Punkte an.
Netz
Wir alle wissen, dass in der Computerwelt ein Bogen durch ein Finite -Line -Segment verbunden ist, das aus endlichen Punkten besteht. Wenn es viele Zeilen gibt, sieht es aus wie ein glatter Bogen.
Das dreidimensionale Modell in Computern ist ähnlich. Die übliche Praxis besteht darin, es unter Verwendung eines Dreiecksnetzes zu beschreiben. Wir nennen dieses Modell das Netzmodell.
Dies ist das berühmte Stanford Rabbit. Seine Position in 3D-Grafiken ähnelt der von Lena, einem bekannten Bereich der digitalen Bildverarbeitung.
Schauen Sie sich dieses Kaninchen an, seine Oberfläche wird reibungsloser/genau, wenn die Anzahl der Dreiecke zunimmt.
In drei ist der Konstruktor des Netzes wie folgt: Mesh (Geometrie, Material)
Geometrie ist seine Form, Material ist sein Material.
Nicht nur Mesh, diese beiden Eigenschaften werden verwendet, um viele Objekte zu erstellen. Schauen wir uns diese beiden wichtigen Attribute an.
Geometrie
Geometrie, Form, ist ziemlich intuitiv. Die Geometrie verwendet das Modell, um die Punktzahl und die Beziehung zwischen Punkten (die Punkte ein Dreieck bilden) zu speichern, um den Zweck der Beschreibung der Form eines Objekts zu erreichen.
Drei liefert viele grundlegende Formen wie Würfel (eigentlich Quader), Flugzeuge (eigentlich Rechtecke), Kugeln, Kreise, Zylinder und runde Tische;
Sie können auch Formen konstruieren, indem Sie die Position jedes Punktes selbst definieren.
Für komplexere Formen können wir sie auch über externe Modelldateien importieren.
Material
Material, Material, das ist nicht so intuitiv wie die Form.
Material ist tatsächlich eine Sammlung aller visuellen Attribute, mit Ausnahme der Form der Objektoberfläche, wie Farbe, Textur, Glättung, Transparenz, Reflexion, Brechungsindex und Leuchtkraft.
Hier sprechen wir über die Beziehung zwischen Material, Karte und Textur.
Das Material wurde oben erwähnt und enthält Karten und andere.
Die Aufkleber sind tatsächlich "Paste" und "Paste", einschließlich der Bilder und wo die Bilder gepostet werden sollten.
Was die Textur betrifft, so ist es tatsächlich ein "Bild".
Drei bietet eine Vielzahl von Materialien zur Auswahl und kann frei diffuse/spiegelreflektiert und andere Materialien wählen.
Punkte
Schauen wir uns nach dem Gespräch über Mesh einen anderen Objekt an - Punkte.
Points ist eigentlich eine Sammlung von Punkten. Es wurde schon lange Partikelsystem genannt. Es wurde in der Version R68 in Pointcloud umbenannt und in der R72 -Version umbenannt. Die Namensänderung liegt hauptsächlich daran, dass Herr Doob der Ansicht ist, dass Partikelsysteme ein vollständiges System sein sollten, das die Verarbeitung von Partikeln und damit verbundenen physikalischen Eigenschaften umfasst, während Punkte in drei viel einfacher sind. Also wird diese Klasse irgendwann Punkte genannt.
Der typische Effekt, den Punkte erreichen können, ist Folgendes: Offizielles Beispiel
Licht
Gott sagte: Es muss Licht geben!
Der Licht- und Schatteneffekt ist ein wichtiger Faktor, der das Bild anreichert.
Drei liefert eine Vielzahl von Lichtquellen, darunter Ambient Light Ambient Light, Point Light Quell Pointlight, Spotlight -Scheinwerfer, Richtlicht -Richtlinie, Hemisphäre -Licht -Hemisphäre -Licht und anderes Licht.
Fügen Sie einfach die erforderliche Lichtquelle zur Szene hinzu.
Renderer
Verschiedene Objekte sind in Szene, Licht und Kameras eingebaut, die Objekte beobachten. Es ist Zeit, das zu rendern, was Sie auf dem Bildschirm sehen. Das macht Render.
Renderer bindet ein Canvas -Objekt und kann Eigenschaften wie Größe, Standard -Hintergrundfarbe usw. festlegen.
Rufen Sie die Renderfunktion von Renderer an, geben Sie Szene und Kamera ein und Sie können das Bild in Leinwand bringen.
Sich das Bild bewegen
Jetzt kann ein statisches Bild erhalten werden. Wie kann es sich bewegen?
Eine sehr einfache Idee ist es, die Position, den Winkel und die verschiedenen Eigenschaften des Objekts in der Szene zu ändern und dann die Renderfunktion zum Rendern aufzurufen.
Wie bestimmen Sie also den Zeitpunkt der Wiederherstellung?
HTML5 bietet uns einen RequestAnimFrame, der die übergebene Funktion vor jeder Seite automatisch aufruft.
Wenn wir dies am Anfang machen:
Funktion render () {renderer.render (Szene, Kamera);}Ändern Sie es einfach:
Funktion render () {RequestAnimationFrame (Render); Object.position.x += 1; Renderer.render (Szene, Kamera);}Objekt kann sich bewegen!
Kastanischen Kastanien geben
Lassen Sie uns ein einfaches Beispiel verwenden, um diesen Prozess zu sortieren.
Schreiben Sie zunächst eine Seite mit Leinwandelementen.
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/Re.Min.js.min.js.js.min.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js. html, Körper {Rand: 0; Polsterung: 0; } #Whree_canvas {Position: absolut; Breite: 100%; Höhe: 100%; } </style> </head> <body> <Canvas id = "Three_canvas"> </canvas> </body> </html>Lassen Sie uns den JavaScript -Teil unten durchführen
Zuerst Renderer initialisieren
Funktion initrenderer () {width = document.getElementById ('Three_canvas'). Clientwidth; height = document.getElementById ('Three_canvas'). clientHeight; renderer = new Three.Webglrenderer ({// Binden Sie Canvas an renderer canvas: document.getElementById ('Three_canvas')}); renderer.setSize (Breite, Höhe); // Setzen Sie die Rendering -Größe auf das Gleiche wie Canvas renderer.setClearcolor (0xffffffffffs, 1.0); // Setzen Sie die Standardfarbe und Transparenz}Initialisierungsszenario:
Funktion initscene () {szene = new Three.scene ();}Initialisieren Sie die Kamera:
Funktion initcamera () {// Einfache orthogonale Projektionskamera, gegenüber der Mitte des Ansichtsfensters, entspricht die Ansichtsfenstergröße wie die Größe der Leinwand. Kamera = neue drei.OTHOGROGHCAMERA (Breite / -2, Breite / 2, Höhe / 2, Höhe / -2, 1, 1000); // Setzen Sie die Kamera -Position Kamera.position.x = 0; camera.position.y = 0; camera.position.z = 200; // Setzen Sie die nach oben richtende Kamera der Kamera.up.x = 0; camera.up.y = 1; camera.up.z = 0; // Stellen Sie die Fokussposition der Kamera fest (tatsächlich eine Richtungskamera festlegen).Um die Position und Richtung einer Kamera eindeutig zu bestimmen, sind die drei Eigenschaften von Position, Up und Lookat unverzichtbar.
Hier haben wir eine orthogonale Projektionskamera erstellt. Hier halte ich die Ansichtsgröße im Einklang mit der Bildschirmauflösung nur zur Bequemlichkeit, so dass eine Einheitslänge im Koordinatensystem einem Pixel des Bildschirms entspricht.
Wir platzieren die Kamera auf die Z -Achse und zeigen den Koordinatenursprung, und die obere Richtung der Kamera ist die Y -Achse. Beachten Sie, dass die Richtung von UP und die Richtung des Lookats senkrecht sein müssen (Sie werden wissen, ob Sie sich mit Ihrem eigenen Kopf vergleichen).
Hier ist ein Würfel, der der Szene hinzugefügt wurde:
Funktion initObject () {// Erstellen Sie einen Würfel mit einer Seitenlänge von 100 var Geometry = new Three.CubeGeometry (100, 100, 100); Object = new Three.mesh (Geometrie, neue drei.Meshnormalmaterial ()); szene.add (Objekt);}Beachten Sie, dass wir das normale materielle Meshnormalmaterial verwenden, so dass die Farbe jedes Gesichts des Würfels mit der Richtung zu diesem Gesicht zusammenhängt, wodurch das Beobachten/Debuggen erleichtert wird.
In dieser einfachen Demo habe ich nicht vor, Licht- und Schatteneffekte hinzuzufügen, und das normale Material reagiert nicht auf Licht.
Erstellen Sie schließlich eine Animationsschleife
Funktion render () {RequestAnimationFrame (Render); Object.Rotation.x += 0,05; Object.Rotation.y += 0,05; Renderer.render (Szene, Kamera);}Jeder Repaint lässt den Würfel ein wenig drehen.
Wenn die Seite geladen wird, rufen Sie einfach die vorherigen Funktionen an
Funktion Threestart () {initrenderer (); initcamera (); Initscene (); initObject (); render ();} Fenster.onload = Threestart ();Die komplette Demo sieht so aus:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/Re.Min.js.min.js.js.min.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js.js. html, Körper {Rand: 0; Polsterung: 0; } #Whree_canvas {Position: absolut; Breite: 100%; Höhe: 100%; } </style> </head> <body> <Canvas id = "Three_canvas"> </canvas> <Script> var Renderer, Kamera, Szene, Licht, Objekt; var Breite, Höhe; Funktion initrenderer () {width = document.getElementById ('Three_canvas'). Clientwidth; height = document.getElementById ('Three_canvas'). clientHeight; renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Three_canvas')}); renderer.setSize (Breite, Höhe); Renderer.SetClearcolor (0xfffff, 1.0); } function initcamera () {camera = new Three.OtographicCamera (Breite / -2, Breite / 2, Höhe / 2, Höhe / -2, 1, 1000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 200; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookat ({x: 0, y: 0, z: 0}); } function initscene () {szene = new Three.scene (); } function initObject () {var geometry = new Three.CubeGeometry (100, 100, 100); Object = new Three.mesh (Geometrie, neue drei.Meshnormalmaterial ()); Szene.Add (Objekt); } function render () {RequestAnimationFrame (Render); Object.Rotation.x += 0,05; Object.Rotation.y += 0,05; Renderer.Render (Szene, Kamera); } function threestart () {initrenderer (); initcamera (); Initscene (); initObject (); machen(); } window.onload = Threestart (); </script> </body> </html>Nach dem Sparen als HTML wird ein solch rotierender Würfel in der Mitte des Bildschirms angezeigt.
Zusammenfassung
Das ist alles für die Einführung von drei.js. Dieser Artikel erwähnt im Grunde genommen wichtige Komponenten in drei. Tatsächlich gibt es viele Dinge, die ich zusammenfassen möchte, aber das Schreiben in diesem Artikel mag umständlich erscheinen. Die ursprüngliche Absicht dieses Artikels besteht darin, die Leser nach dem Lesen ein intuitives und allgemeines Verständnis von drei.Js zu ermöglichen, und beabsichtigen nicht, zu viele Details einzubeziehen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.