Share
3D-Grafiken im Browser sind seit ihrer Einführung ein beliebtes Thema. Wenn Sie Ihre Apps jedoch mit einfachem alten WebGL erstellen, würde dies sehr lange dauern. Aber jetzt haben wir einige nützliche Bibliotheken, wie Three.js. In dieser Serie zeige ich Ihnen, wie Sie beeindruckende 3D-Erlebnisse für den Browser erstellen können.
Ich erwarte, dass Sie ein grundlegendes Verständnis des 3D-Raums haben, bevor Sie mit dem Lesen dieses Tutorials beginnen, da ich nicht Dinge wie Koordinaten, Vektoren usw. erklären werde.
Wir beginnen mit dem Code aus dem vorherigen Teil dieser Serie. Ergreifen Sie auch die von mir bereitgestellten Assets und legen Sie sie im selben Ordner wie Ihre App ab. Da wir Bilder hier verwenden, müssen Sie Ihre App auf einem statischen Server (möglicherweise lokal) ablegen, da Sie den Browser mit aktiviertem Dateizugriff von Dateien aus starten (z. B. mit dem --Dateizugriff aus Dateien zulassen Flag in Chrome) CORS lässt Sie nicht aus einer Datei laden. Das ist alles, was Sie tun müssen, bevor Sie fortfahren.
Wenn Sie sich jemals so gelangweilt haben, dass Sie etwas mit reinem OpenGL erstellt haben, erinnern Sie sich wahrscheinlich daran, wie viel Schmerz das Laden einer Textur ist. Zum Glück hat Three.js eine nette Funktion, die die Textur für uns laden und einrichten wird. Fügen Sie diese Zeile vor der Definition des Materials unseres Würfels hinzu:
Accentsconagua
var cubeTexture = THREE.ImageUtils.loadTexture ('./box.png'); Es ist wirklich alles, was Sie tun müssen, um Ihre Textur zu laden.
In einer realen App müssten Sie die Textur wie ein normales Bild vorladen und den Benutzern eine ausgefallene Ladeleiste zeigen, um sie über das Laden zu informieren (Three.js verwendet dann das zwischengespeicherte Bild)..
Jetzt werden wir die Textur auf unseren Würfel anwenden. Dies ist auch einfach, Sie müssen nur die Farbdefinition im Material des Würfels ersetzen, um wie folgt auszusehen:
var cubeMaterial = new THREE.MeshLambertMaterial (map: cubeTexture);
Das Karte Attribut legt die Textur fest. Jetzt können Sie den Browser öffnen und Sie sollten einen rotierenden, strukturierten Würfel sehen:
Sie können die Textur auch einfärben, fügen Sie einfach die hinzu Farbe Definition in den Optionen des Materials wie folgt:
var cubeMaterial = new THREE.MeshLambertMaterial (map: cubeTexture, Farbe: 0x28c0ec);
Und jetzt wird der Würfel blau:
Auf diese Weise können Sie mehrere verschiedene Objekte mit derselben Textur haben, wenn sich nur die Farbe ändert.
Sie können für jede Fläche des Würfels unterschiedliche Materialien einstellen. Um dies zu erreichen, müssen Sie die Definition des gesamten Materials ändern. Zuerst definieren Sie die Materialien Array. Jedes Element im Array entspricht dem Material einer Fläche. Sie gehen in diese Reihenfolge: rechts, links, oben, unten, vorne und hinten:
var materials = []; materials.push (neues THREE.MeshLambertMaterial (map: cubeTexture, Farbe: 0xff0000)); // rechte Seite materials.push (neues THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffff00)); // linkes Gesicht materials.push (neues THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffffff)); // top face materials.push (neues THREE.MeshLambertMaterial (map: cubeTexture, color: 0x00ffff)); // Unterseite Materialien.push (neues THREE.MeshLambertMaterial (map: cubeTexture, color: 0x0000ff)); // Vorderseite Materialien.push (neues THREE.MeshLambertMaterial (map: cubeTexture, color: 0xff00ff)); // Rückfläche
Wie Sie sehen, hat jedes Gesicht sein eigenes Material, so dass Sie für jedes Gesicht unterschiedliche Texturen, Farben und andere Attribute einstellen können. Ändern Sie als Nächstes den Materialtyp des Würfels in THREE.MeshFaceMaterial:
var cubeMaterial = new THREE.MeshFaceMaterial (Materialien);
Sie müssen nur das übergeben Materialien Array als Parameter. Im Browser sollten Sie sehen, dass jede Seite des Würfels eine andere Farbe hat:
Angenommen, Sie möchten einen Effekt erzeugen, indem Sie Schneeflocken in Ihrer App drehen. Wenn Sie jede Schneeflocke als Mesh rendern würden, erhalten Sie sehr niedrige fps. Hier kommen Partikel ins Spiel. Sie sind viel unkomplizierter und das Zeichnen als ein ganzes Partikelsystem macht sie wirklich effizient.
Beginnen Sie mit der Erstellung einer Geometrie für unsere Partikel:
var-Partikel = neue DREI.Geometrie;
DREI.Geometrie ist ein Basisgeometrieobjekt ohne Form. Nun müssen wir die Position jedes Partikels im System definieren. Lass es völlig zufällig sein:
für (var p = 0; p < 2000; p++) var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250); particles.vertices.push(particle);
Diese Schleife erzeugt 2000 zufällig platzierte Partikel und fügt sie alle in die Geometrie ein. Als Nächstes müssen Sie das Material der Partikel definieren:
var particleMaterial = new THREE.ParticleBasicMaterial (color: 0xeeeeee, size: 2);
Beachten Sie, dass wir verwenden THREE.ParticleBasicMaterial, das ist nur für Partikel. In Optionen definieren wir nur die Farbe und die Größe jedes Partikels. Schließlich können Sie das Partikelsystem erstellen und der Szene hinzufügen:
var PartikelSystem = neues DREI.Partikelsystem (Partikel, PartikelMaterial); scene.add (Partikelsystem);
Um die Szene besser aussehen zu lassen, drehen wir die Partikel in die entgegengesetzte Richtung zu der, in der sich der Würfel dreht (ändern Sie die machen Funktion, um so auszusehen):
function render () requestAnimationFrame (render); var delta = clock.getDelta (); cube.rotation.y - = delta; Partikelsystem.rotation.y + = Delta; Renderer.Render (Szene, Kamera);
Wir zogen um clock.getDelta auf die Variable, denn wenn Sie es so verwenden würden:
cube.rotation.y - = clock.getDelta (); Partikelsystem.rotation.y + = clock.getDelta ();
Das Partikelsystem würde sich nicht drehen, da der zweite Aufruf eine Zahl nahe null zurückgibt (denken Sie daran, dass es die Zeit vom letzten Aufruf abruft)..
Öffnen Sie nun den Browser und Sie sollten einen Würfel und rotierende Partikel sehen:
Lassen Sie uns beide Dinge kombinieren, die Sie in diesem Tutorial gelernt haben, und verwandeln Sie diese hässlichen weißen Quadrate in echte Schneeflocken. Laden Sie zuerst die Schneeflockentextur:
var particleTexture = THREE.ImageUtils.loadTexture ('./ snowflake.png'); Ändern Sie nun das Material der Partikel, um die Textur zu verwenden. Aktivieren Sie auch Transparenz und vergrößern Sie die Partikel, damit wir die Form sehen können:
var particleMaterial = new THREE.ParticleBasicMaterial (map: particleTexture, transparent: true, size: 5);
Wenn Sie den Browser öffnen, sollten Sie einige schöne Schneeflocken im Würfel sehen:
Der Raucheffekt ist ziemlich einfach zu erreichen und sieht gut aus. Beginnen Sie mit der Erstellung der Geometrie, genau wie bei den Schneeflocken:
var smokeParticles = neue DREI.Geometrie; für (var i = 0; i < 300; i++) var particle = new THREE.Vector3(Math.random() * 32 - 16, Math.random() * 230, Math.random() * 32 - 16); smokeParticles.vertices.push(particle);
Der einzige Unterschied besteht darin, dass wir die Position aus einem rechteckigen Prisma mit den Abmessungen 32x32x230 auswählen. Nun laden wir die Textur und definieren das Material:
var smokeTexture = THREE.ImageUtils.loadTexture ('./ smoke.png'); var smokeMaterial = new THREE.ParticleBasicMaterial (map: smokeTexture, transparent: true, Blending: THREE.AdditiveBlending, Größe: 50, Farbe: 0x111111); In der Materialdefinition gibt es eine mischen Möglichkeit. Sie teilt dem Renderer mit, wie er ein Objekt auf einem anderen darstellen soll. Mit THREE.AdditiveBlending Überlappende Farbwerte werden addiert, wodurch in Bereichen mit höherer Partikeldichte ein hellerer Rauch entsteht. Wir haben die Farbe auch auf fast schwarz gesetzt, damit der Rauch natürlicher wirkt.
Erstellen Sie schließlich das Partikelsystem, verschieben Sie es ein wenig nach links und fügen Sie es der Szene hinzu:
var smoke = new THREE.ParticleSystem (smokeParticles, smokeMaterial); smoke.sortParticles = true; Rauchposition x = -150; Szene.Add (Rauch);
Sie müssen auch einstellen Rauch.Sortierpartikel um wahr zu sein. Wenn es falsch ist, wird der Hintergrund des Sprites möglicherweise schwarz gezeichnet. Wenn Sie den Browser öffnen, sollten Sie neben dem Würfel eine stille Rauchsäule sehen:
Um den Rauch zu animieren, müssen wir alle Partikel durchlaufen und etwas nach oben bewegen. Fügen Sie diesen Code dem hinzu machen Funktion:
var particleCount = smokeParticles.vertices.length; while (ParticleCount--) var Partikel = Rauchpartikel.Verteiler [ParticleCount]; partikel.y + = delta * 50; if (Partikel.y> = 230) Partikel.y = Math.random () * 16; Particle.x = Math.random () * 32 - 16; Particle.z = Math.random () * 32-16; smokeParticles .__ dirtyVertices = true;
In der Schleife fügen wir hinzu Delta * 50 zur y-Position des Partikels. Als Nächstes prüfen wir, ob das Partikel höher als 230 ist. Wenn dies der Fall ist, wählen wir zufällig die neue Position irgendwo im Boden der Rauchsäule. Zum Schluss noch das Wichtigste: das Einstellen der Geometrie __dirtyVertices Flag auf wahr.
Um die Leistung zu verbessern, speichert Three.js die Objekte im Cache, um zu vermeiden, dass bei jedem Frame alle WebGL-Aufrufe erneut erstellt werden. Wenn wir also etwas in der Geometrie des Objekts ändern, müssen wir den Renderer darüber informieren, dass sich die Änderung geändert hat. Grundsätzlich die
__dirtyVerticesflag erreicht nur das Element.
Wenn Sie den Browser jetzt öffnen, sollten Sie neben dem Cube einen sanft animierten Rauch sehen.
In diesem Tutorial haben Sie gelernt, wie Sie Texturen und Partikel verwenden. Scheuen Sie sich nicht, ein wenig mit Ihrer App zu experimentieren. Bei Problemen schauen Sie in die Dokumentation. Im nächsten Artikel werde ich Ihnen zeigen, wie Sie Modelle laden und animieren.
