Erstellen Sie interaktive 3D-Visuals mit drei.js

Dieses Webgl-Tutorial zeigt, wie eine 3D-Umweltsimulation erstellt wird, die zeigt, was mit der Welt als CO2-Level angewiesen ist. (Sie können mehr sehen Webgl-Experimente. Hier.)

Der Benutzer steuert die Pegel mit einem HTML-Eingangsbereichsleiter. Da der Benutzer mehr CO2 fügt, erscheint mehr SMOG in der Szene, der Wasserspiegel steigt, wenn der Temperaturanstieg mehr polare Eiskappen schmilzt, dann verschwinden Bäume, wenn sie in Wasser eingetaucht sind.

Die Elemente werden mit einer Tween-Bibliothek animiert und den Schieberegler in die entgegengesetzte Richtung ziehen, um die Effekte umzukehren. Wenn es nur im wirklichen Leben einfach war!

01. Anzeigeelemente

Um das Projekt zu starten, öffnen Sie den Ordner 'Start' in Ihrem Code IDE. Aufmachen index.html. Und Sie werden sehen, dass dort ein grundlegendes Seitengerüst vorhanden ist, da es bereits einen Code gibt. Fügen Sie im Abschnitt Body-Abschnitt die Anzeigeelemente hinzu, die als Schnittstelle zum 3D-Inhalt verwendet werden.

 & lt; div id = "header" & gt;
  & lt; IMG SRC = "IMG / CO2.PNG" ID = "BADGE" & GT;
  & lt; / div & gt;
  & lt; div id = "innere" & gt;
  & lt; Input Class = "Slide" Typ = "Range" min = "0" max = "7" Schritt = "1" Wert = "0" oninput = "Showval (this.Value)" & GT;
  & lt; p & gt; ziehen Sie den Schieberegler, um den Niveau von CO2 & lt; / p & gt;
  & lt; / div & gt; 

02. Verbinden der Bibliotheken

Der 3D-Inhalt wird über drei.js angezeigt, das hier enthalten ist. Ein Collada-Modell wird später der Szene hinzugefügt. Die zusätzliche Bibliothek, um dies zu laden, ist sowie eine grundlegende Tween-Bibliothek enthalten. Die nächsten Zeilen alle verknüpfen alle zur Nachbearbeitungseffekte, die den Endgültigen hinzufügen.

 & lt; Skript src = "js / drei.min.js" & gt; & lt; / script & gt;
& lt; Skript src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; Skript src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; Skript src = 'js / postprocessing / effectcomposer.js' & gt; & lt; / script & gt;
& lt; Skript src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; Skript src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; Skript src = 'js / postprocessing / maskpass.js' & gt; & lt; / script & gt; 

03. Postverarbeitungs-Shader

Nachdem die Szene jeden Rahmen gerendert hat, wird eine Reihe von Postprozess-Effekten hinzugefügt. Dies sind die Bibliotheken, die den Filmkornwirkung befähigen, eine Neigungsverschiebungsunschärfe oben und unten auf dem Bildschirm, dann schließlich eine Vignette, um an den Rändern des Bildschirms herauszuführen.

04. Hinzufügen der Variablen

Ein Teil des Codes wurde für Sie abgeschlossen. Sie sehen einen Kommentar, in dem Sie den Rest des Tutorialcodes hinzufügen können. In dieser 3D-Szene werden eine Reihe von Variablen verwendet, die sich um die Bildschirmauflösung, verschiedene 3D-Modelle und Nachbearbeitung kümmern. Zwei wichtige Variablen sind die Waterht für die Wasserhöhe und das Rastval , die sich an die letzte Position des Schiebereglers erinnert.

 var screen screen_width = window.innerwidth, screen_hight = window.innerhöhe,
 mousex = 0, mousey = 0, windowhalfx = fenster.innerwidth / 2, windowhalfy = fenster.innerhöhe / 2, kamera, szene, renderer, wasser, wasserht = 1;
var textureloader = neuer drei.textureloader ();
VAR-Komponist, SHAPERTY = 0, filmpass, renderpass, copypass, effectvignette, gruppe, lastval = 0; 

05. Initialisierung der Szene

Die Init-Funktion ist ein großer Teil des Codes, um sicherzustellen, dass die Szene mit dem richtigen Blick auf den Anfang eingerichtet ist. Auf der Seite wird ein Container hinzugefügt, und hier wird die 3D-Szene angezeigt. Eine Kamera wird hinzugefügt und ein Hintergrund des Hintergrundnebens, um den Abstand herauszufühlen.

 Funktion init () {
  VAR-Container = Dokument.Kreateelement ('div');
  dokument.body.appendchild (Container);
  kamera = neue drei.perspektivecamera (75, screen_width / screen_hight, 1, 10000);
  Camera.Position.Set (2000, 100, 0);
  Szene = neue drei.szene ();
  Szene.fog = new drei.fogexp2 (0xb6d9e6, 0,0025);
  Renderer = neuer drei.webglrenderer ({
  Antialias: True.
  }); 

06. Renderer einstellen

Der Renderer erhält eine Hintergrundfarbe und die Auflösung ist auf dieselbe Größe wie das Pixelverhältnis des Bildschirms eingestellt. Schatten sind in der Szene aktiviert, und es wird auf der Seite im Containerelement platziert. Ein Hemisphäre-Licht wird zugegeben, der einen Himmel und eine Massefarbe aufweist.

Renderer.SetClearColor (0xAdc9D4);
Renderer.SetPixelratio (fenster.devicepixelratio);
Renderer.Setsize (screen_width, screen_hight);
renderer.shadowmap.enabled = true;
Renderer.shadowmap.type = drei.pcfsoftshadowmap;
container.appendchild (renderer.domement);
var light = new three.hemispherelight (0xa1e2f5, 0x6f4d25, 0,5);
Szene.de (licht); 

07. Shader-Variablen

Die Variablen, die die Shader Post Process-Effekte steuern, erhalten hier ihre Werte. Diese Variablen werden später verwendet, um Werte hinzuzufügen, die den Look kontrollieren. Wenn Sie in der Parameter-Funktion schauen, sehen Sie das bereits für Sie abgeschlossen.

 Renderpass = neuer drei.renderpass (Szene, Kamera);
Hblur = new three.shaderpass (drei.horizonthaltliftshiftshader);
vblur = new three.shaderpass (drei.verticaltiltilshiftshader);
filmpass = neuer drei.shaderpass (drei.filmshader);
EffectVignette = Neuer drei.Shaderpass (drei.VignetHader);
copypass = new three.shaderpass (drei.copyshader); 

08. Die Auswirkungen erstellen

Die Effekte müssen in etwas, das als Effektkomponistin genannt wird, gestapelt werden. Dies erfordert jeden Effekt und wendet das Styling darauf an. Dann wird alles als abschließende Szene auf dem Bildschirm angezeigt, den Sie sehen, wann die Render-Funktion später hinzugefügt wird.

09. Laden des Cloud-Images

Das Parameter Die Funktion wird aufgerufen und legt die einzelnen Parameter für die Posteffekte fest. Eine neue Gruppe wird erstellt, und dies hält den gesamten Szenengehalt darin, um die Gruppe von Objekten leicht zu drehen. Ein transparentes PNG-Bild wird als Wolkenmaterial belastet, das als Sprite innerhalb der Szene verwendet wird.

 params ();
  Gruppe = neue drei.Gruppe ();
  Szene.Add (Gruppe);
  var cloud = textureloader.load ("iMG / cloud.png");
  Material = neues drei.spitematerial ({{
  Karte: Cloud, Deckkraft: 0.6, Farbe: 0x888888, Nebel: True
}); 

10. Doppel für Schleife

Acht Gruppen werden im ersten erstellt zum Schleife. Diese acht Gruppen erhalten alle in der zweiten für Schleife 35 Wolken hinzu. Jede Wolke wird in einem zufälligen Ort über der Szene platziert. Die Gruppen werden mit dem Schieberegler vom Benutzer ein- und ausgeschaltet, um Smog hinzuzufügen, die in der Visualisierung hinzugefügt und entfernt wird.

 für (j = 0; j & lt; 8; j ++) {
  var g = neue drei.gruppen ();
  für (i = 0; I & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  Sprite = neues drei.Sprite (Material);
  Sprite.Position.Set (x, y, z); 

11. Skalieren der Wolke

Die Cloud ist auf eine Größe skaliert, die es ermöglicht, in der Szene sichtbar zu sein. Jede Gruppe von Wolken nach der ersten Gruppe ist skaliert, so dass sie für den Renderer praktisch unsichtbar sind. So werden sie später sichtbar gemacht, indem sie sie wieder auf ihre volle Größe skalieren, da dies einen guten Tween-Effekt ergibt.

12. Laden des Modells

Nun wird der Collada Loader eingestellt, um das zu laden Szene.Dee Modell. Wenn es das Laden beendet, wird das Modell gescannt und ein Objekt, das ein Netz erfolgt, um Schatten zu werfen und Schatten zu erhalten, um der Szene etwas Extra Tiefe zu geben.

 VAR Loader = Neuer drei.Colladaloader ();
loader.options.convertupaxis = true;
loader.load ('szene.dae', function (collada) {
  var dae = collada.scene;
  Dae.Traverse (Funktion (Kind) {
  wenn (Kinderinstanz drei.mesh) {
  child.castshadow = wahr;
  Kind.ReceIVESHADOW = TRUE;
  }
}); 

13. Feststellung von Besonderheiten in der Szene

Da das Modell jetzt zur Anzeige bereit ist, ist es auf die richtige Größe, um die Szene anzupassen. Der Code muss die Höhe des Wassers spezifisch steuern, sodass das Wassermodell in der Szene gefunden wird und in die globale Variable übernimmt. In ähnlicher Weise muss das Hauptlicht gefunden werden, damit er auf Projektschatten eingestellt werden kann.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updatematrix ();
group.add (dae);
wasser = szene.getobjectbyName ("wasser", wahr);
wasser = wasser.children 
;
light = szene.getobjectbyName ("predight", true);
Licht = licht.kinder 
; 

14. Lichteinstellungen

Nun, da der Rampenlicht gefunden wird, werden die Besonderheiten, die den Schatten der Schatten in die Szene machen, eingerichtet. Hier wird auch das Fading des Lichts an den Rändern des Flecks eingestellt. Wenn das Modell das größte Element des Lastes ist, wird schließlich der Rest der Szene eingerichtet, bevor dieser Code ausgeführt wird. Daher kann die Renderfunktion jedes Rahmens aufgerufen werden.

 licht.target.position.set (0, 0, 0);
  light.castShadow = true;
   light.shadow = new three.lightshadow (neue drei.perspektivecamera (90, 1, 90, 5000));
  light.shadow.bias = 0,0008;
  light.shadow.maps.width = 1024;
  light.shadow.mapsize.hight = 1024;
  light.penumbra = 1;
  light.decay = 5;
  machen();
}); 

15. Letzter Initialisierungscode

Der letzte Teil der Init-Funktion setzt verschiedene Maus- und Berührungseingänge, die die Kamera basierend auf ihrer Position bewegen. Ein Ereignis ist auch registriert, um den Anhören zu hören, ob der Bildschirm geändert wird, und dies wird die gerenderte Anzeige aktualisiert.

 document.addeventListener ('MouseMove', OnDocumentMouseMove, FALSE);
  document.addeventListener ('touchstart', ontocumenttouchStart, FALSE);
  document.adDeventListener ('TouchMove', OnDocumentTouchMove, FALSE);
  Window.AdDeventLister ('RESISTISE', ONWINDOWRESIZE, FALSCH);
} 

16. Rendern Sie jeden Rahmen

Die Render-Funktion wird so eingestellt, dass er so nahe bei 60 Bildern pro Sekunde aufgerufen wird, da der Browser verwalten kann. Die Gruppe, die alle Modelle enthält, wird eingestellt, um sich mit einem kleinen Betrag mit jedem Rahmen zu drehen. Die Position der Kamera wird von der Maus- oder Berührungseingabe aktualisiert und schaut sich weiter in die Mitte der Szene an.

17. Aktualisieren der Anzeige

Die Shader-Zeit ist eine Variable, die einfach um 0,1 pro Frame steigt, und dies wird in die Filmpass damit das eignische Filmkorn aktualisiert werden kann. Der Effektkomponist wird aktualisiert und auf dem Bildschirm gerendert. Schließlich wird der Tween-Motor auch aktualisiert.

 SHARTTY + = 0,1;
  filmpass.uniforme ['time']. Wert = Sacktime;
  Komponist.Render (0,1);
  Tween.update ();
} 

18. Benutzereingabe abrufen

Der in Schritt 1 hinzugefügte Eingabebereichsschieber ruft die Showval. Funktion, die hier definiert ist. Wenn der Benutzer darauf klickt, dass der Schieberegler verschoben wurde. Wenn es nach oben bewegt wird, wird die nächste Cloud-Gruppe mit einem Tween über 0,8 Sekunden skaliert. Die Wasserhöhe wird aktualisiert und dies ist auch in die neue Höhe gezüchtet.

 Funktion ShowVal (Val) {
  Wenn (Val! = Rastval) {
  if (Val & gt; Rastval) {
  Neue Tween (Group.Children [Val ]Scale) .O ({x: 1, Y: 1, Z: 1}, 800) .start ();
  waterht + = 0,07;
  NEUE Tween (Water.Scale) .O ({y: waterht}, 800).) .start (); [); 

19. Packen Sie die Bäume

Die Temp-Variable findet die derzeitige Gruppe von Bäumen, die aus der Szene eliminiert werden sollte, und hier skaliert sie sie nur mit einem Tween auf der y-Achse. Eine elastische Erleichterung wird verwendet, so dass diese Quellen auf dem Bildschirm für einen angenehmen Effekt aus Sicht auf den Bildschirm fällt. Da mehr Wasser und Wolken in der Szene sind, verschwinden die Bäume.

20. gegenüberliegender Eingang.

Der erste Inhalt, der überprüft wird, ob der Schieberegler aufwärts gerutscht wurde, oder nach rechts. Nun erkennt der Code den Benutzer, der nach links gleitet. Die Wolken werden mit einem Tween skaliert und ist also der Wasserstand, um einen Kühlwirkung auf die Erde zu zeigen.

 Neue Tween (Group.Children [Rastval] .Scale) .O ({x: 0,001, Y: 0,001, Z: 0.001}, 800)., (Tween.esing.quadratic.inout) .start ( );
Waterht - = 0,07;
NEUE Tween (Water.Scale) .O ({y: waterht}, 800).) .start (); [); 

21. Finishing.

Der letzte Schritt besteht darin, die Bäume zurückzubringen, sodass sie mit einem elastischen Tween wieder auf ihre ursprüngliche Größe skaliert werden.Speichern Sie die Szene und zeigen Sie die Webseite von einem Server an, der entweder lokal auf Ihrem eigenen Computer oder auf einem Webserver gehostet wird.Sie können mit der Mausbewegung und dem Schieberegler interagieren, um die Szenanzeige zu ändern.

Dieser Artikel erschien ursprünglich in Webdesigner Ausgabe 265. Kaufen Sie es Hier .

Zum Thema passende Artikel:

• So codieren Sie einen Augmented Reality-Marker
• 20 erstaunliche Beispiele für Webgl in Aktion
• 9 Brillante Anwendungen von 3D im Webdesign