Erstellen einer WebGL-3D-Landing-Seite

Die Erstellung einer WebGL-3D-Landing-Seite ist eine Möglichkeit, um mit Ihrem Publikum einen guten ersten Eindruck zu erstellen. Mit WebGL können Sie qualitativ hochwertige visuelle Inhalte direkt im Browser liefern. Sie können es ohne Plugins oder spezielle Anforderungen machen. Alle modernen Browser unterstützen Webgl, zusammen mit mobilen Geräten und Tablets. Mit WebGL können Sie unglaubliche 3D-Szenen erstellen. Es können Webvr-Erlebnisse, Manipulieren Sie Video, rendern Grafiken Shader und vieles mehr.

In diesem Tutorial machen Sie eine Zielseite für das fiktive Filmstudio, relative Studios. Das Konzept ist dramatisch und visuell eingreifend, da ein mysteriöses Objekt als Reaktion auf die Mausinteraktion reflektiert und dreht. Partikel, die um sich herum, wechseln Sie die Farbe, während sie sich bewegen. Sie arbeiten über jede der Schritte, um diese interaktive Seite zu erstellen, sodass Sie Ihre eigenen für Ihre Projekte generieren können (für weitere Inspiration, sehen Sie unseren Beitrag auf dem besten Startseiten ).

Sie verwenden nur die inklusive Funktionen von drei.js, die leistungsstarke 3D-Renderbibliothek für das Web. Sie können Ihre eigenen Bilder als Texturen verwenden, um es einzigartig zu machen. Sie erfahren auch mehr, dass Sie Meshes, Beleuchtung und Texturen verwenden, um die Oberflächendetails zu verbessern, wie Umweltkarten eingesetzt werden, und wie Sie die Schichten für Tiefe und Zinsen hinzufügen können.

Es sollte mehr als genug sein, um zu beginnen, und viel, um Ihre nächsten Projekte zu tanken.

Bevor du anfängst, Laden Sie die Dateien für dieses Tutorial herunter .

01. Basic HTML-Setup

Um zu beginnen, brauchen Sie irgendwo, um Ihre 3D-Szene zu sehen. Richten Sie eine grundlegende HTML-Datei ein und enthalten einen Link auf drei.js. Dies kann entweder extern gehostet oder von der hinzugefügt werden Drei.js-Repository hier: . Fügen Sie einige einfache CSS hinzu, um den vollständigen Bildschirm zu erstellen, und entfernen Sie alle Bildlaufleiste. Speichern Sie Ihre Datei auf Ihrem lokalen Webserver, sodass Sie den HTML-HTML auftragen können, wenn Sie testen können. Fügen Sie den folgenden Code hinzu, um loszulegen.

 ​​& lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Titel & GT; relative Studios & lt; / title & gt;
& lt; Skript src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; style & gt;
HTML, Körper {Marge: 0; Polsterung: 0; Überlauf versteckt; }
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// 3D-Code geht hierher
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Fügen Sie globale Varianten hinzu

Sie benötigen einige Variablen für Referenzen im restlichen Code. Setze das jetzt auf. Dazu gehört ein Array, um Partikel, eine 't-Variable für Ihr Tetrahedron, Maus, Raycaster und Lichtern zu halten.

Beginnen Sie in Ihren Skript-Tags, indem Sie den folgenden Code hinzufügen.

 // vars
Var num = 30;
VAR-Objekte = [];
var raycaster = new three.raycaster ();
VAR MOUSE = NEUE DREI.Vector2 ();
VaR-Licht, t; 

03. Fügen Sie eine Szene, Kamera hinzu und rendern Sie

Wir müssen zunächst eine Szene hinzufügen, die alle unsere Objekte enthält. Dann fügen wir eine Kamera hinzu, die sich darin bewegen kann, das Schwenken, Kippen und Bewegen wie wir brauchen. Das erste Attribut ist das Sichtfeld. Die zweite ist das Seitenverhältnis. Sie können auch in der dritten und vierten Attribute die nahen und weit entfernten Ebenen definieren. Fügen Sie zuletzt den Renderer hinzu, der die Szene an die Leinwand zieht.

Fügen Sie im Skript-Tag den folgenden Code hinzu.

 // Kamera erstellen
VAR CAMERA = NEUE DREI.PERSPECTIVECAMERA
(65, fenster.innerwidth / fenster.innerhöhe,
0,1, 1000);
Kamera.Position.Set (0,0,0,0,5);
// Eine Szene erstellen
var szene = neue drei.szene ();

// Renderer erstellen
var renderer = neuer drei.webglrenderer (
{Antialias: True});
Renderer.Setsize (window.innerwidth, Fenster.
innerhöht);
Dokument.Body.AppendChild (Renderer.DUERLEIT.
);

04. Fügen Sie einen Scheinwerferlicht hinzu

Als nächstes müssen Sie der Szene ein Licht hinzufügen. Drei.js gelangen mit einer Vielzahl von Lichtern, darunter Punkt, Richtungs-, Umgebungs- und Scheinwerfer. Verwenden Sie dazu ein Scheinwerferlicht. Es gibt Ihnen Positions- und Richtungseigenschaften und ermöglichen es Ihnen, Shadows, wenn Sie später wünschen.

Fügen Sie den folgenden Code hinzu, neben dem Rampenlicht.

 // Erstellen Sie ein Spot-Licht
light = new three.spotlight (0xccddfff, .8);
light.Position.set (0,0,5);
Szene.Add (Licht); 

05. Fügen Sie eine Animationsschleife hinzu

Eine Animationsschleife, manchmal als "Render Loop" bezeichnet, wird ideal 60 Mal pro Sekunde genannt. Der Film läuft bei 24 Bildern pro Sekunde (FPS) und dies ist schnell genug, um das Auge in die Konstante Bewegung ohne Unterbrechung zu trennen. In der Computeranimation streben wir mindestens 30 fps an, aber idealerweise 60fps. Dies gewährleistet eine sehr glatte visuelle Leistung, auch wenn Frames regelmäßig abgesetzt werden.

Wir binden diese Animationsschleife in die FunnyAnimationFrame-Funktion, die zwei Dinge tut. Erstens stellt es sicher, dass der Browser bereit ist, den nächsten Frame zu rendern. Es bedeutet auch, dass Animationen das Rendern anhalten können, wenn der Benutzer diese Browser-Registerkarte nicht mehr anzeigen kann,

Fügen Sie diesen Code hinzu, um die Szene in einer Animationsschleife zu rendern:

 var animate = function () {
Anfrageanimationsframe (animieren);
Renderer.Render (Szene, Kamera);
};

// Animationsschleife starten
animieren (); 

06. Laden Sie eine Bodenbeschaffenheit

Als nächstes erstellen Sie einen Boden für die Szene. Um zu beginnen, müssen Sie ein Bild laden, um zu verwenden. Texturen für Dinge wie Boden- und Wandoberflächen können erstellt werden, indem Sie Ihre eigenen Fotos einnehmen, und sorgfältig einstellen von Kanten in Photoshop CC. . Seien Sie einfach sicher, dass sie gut fliesen können. Um schnell loszulegen, gibt es auch tolle Bibliotheken online, sehen Sie unser Bestes an freie Texturen .

Sie können alles auswählen, das Fliesen fliesen. Dies bedeutet, dass die Kanten nahtlos zusammenfügen würden, wenn Sie sie nebeneinander anlegen. Hier können Sie so etwas wie Fliesen oder Stein auswählen. Beachten Sie, dass Sie die Textur-Wrap-Optionen verwenden, um die Verpackung dafür zu wiederholen. Dieses Beispiel verwendet 12x12 wiederholt. Stellen Sie sich das an, um Ihrem Bild anzupassen, sobald Sie die Szene testen.

 // Eine Bodenbeschaffenheit laden
var textur = neuer drei.textureloader ().
Last ("Assets / stone.jpg");
textur.wraps = textur.wrt = drei.
Wiederholungshändler;
textur.repeat.Set.set (12,12);

07. Erstellen Sie ein Bodenmaterial

Drei.js beinhaltet eine Vielzahl von Materialtypen, die Sie verwenden können. Die Materialien werden als die Haut gedacht, die ein 3D-Objekt abdeckt. Sie können grundlegende Materialien verwenden, die nicht auf Licht- oder Phong- oder Lambert-Shader-Materialien reagieren. Sie können auch Ihre eigenen Shader-Materialien verwenden. Verwenden Sie für diesen Boden ein physisches Material. Es hat einen sehr realistischen Blick, der sehr gut auf Licht reagiert. Verwenden Sie die Textur, die Sie als diffuse Karte geladen haben, und auch als BumpMap, wenn Sie dafür keine bestimmte Textur haben.

 // Bodenmaterial erstellen
Material = NEUE drei.meshphysicalmaterial ({map: textur, bumpmap: textur}); 

08. Erstellen Sie ein Erdmaschern

Wenn wir das Material (Haut) mit der Geometrie kombinieren, die die Form des 3D-Objekts definiert, erstellen wir ein Netz. Für den Boden brauchen Sie einen einfachen Plan. Der Material-Shader und die Textur schaffen die Illusion komplexer Oberflächendetails.

Fügen Sie den folgenden Code hinzu, um Ihr gemahlenes Netz zu erstellen, drehen Sie sich in einen schönen Winkel und positionieren Sie ihn unter der Kamera. Stellen Sie sicher, dass Sie Ihren Code danach ausführen, um zu sehen, wie es aussieht. Passen Sie einen beliebigen Code an, in dem Sie es wählen müssen.

 // Erdungsnetz erstellen
VAR-Geometrie = neue drei.planbuffergeomte
(100.100);
var boden = new drei.mesh (Geometrie,
Material );
Boden.Rotation.Z = math.pi / 180 * -45;
bock.rotation.x = math.pi / 180 * -90;
bodig.position.y = -2.0;
Szene.de (Boden); 

09. Ein Objektiv laden

Als Nächstes fügen Sie ein zentrales 3D-Objekt für fokale Zinsen hinzu. Dies ist der Stern Ihrer Szene, also wählen Sie eine Textur, die Sie gerne abdecken möchten. HINWEIS: Sie machen dieses Objekt hochreflektierend, sodass die hier geladene Textur ein subtileres Aussehen ist, als der Boden war.

 // Objektbeschaffenheit laden
var textur = neuer drei.textureloader ().
Last ("Assets / Rock_01_Diffusion.jpg"); 

10. Erstellen Sie eine Umgebungskarte

Erstellen Sie als nächstes eine Umgebung um Ihr Objekt, das auf seiner Oberfläche reflektiert wird. Sie können diese auch auch zur Szene als Szene hinzufügen. Background-Eigenschaft, wenn Sie möchten. Um eine Umgebung zu laden, verwenden Sie einen Cubetextureloader. Die von Ihnen verwendeten Bilder sollten sechs Bilder sein, die das Innere Ihres Würfels haut, um ein nahtloses Bild zu bilden, das als Cube Maps genannt wird.

 var envmap = new three.cubetextureloader ()
.etpath ("Assets / ')
(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
JPG ',' pz.jpg ',' nz.jpg '); 

11. Tetraedon hinzufügen

Drei.js wird mit vielen Standardgeometrien geliefert, die Sie für Ihre Szenen verwenden können. Einer der kühleren ist das Tetrahedron. Es braucht einen Radius und einen "Detail" -Parameter, um die Anzahl der Gesichter des Objekts zu definieren.

Fügen Sie eine Ihrer Szene mit dem folgenden Code hinzu.

 // Tetrahedron erstellen
VAR-Geometrie = neue drei.
Tetrahedronbuffergeometrie (2,0);
VAR-Material = Neues drei.meshphysicalmaterial
({map: textur, envmap: envmap,
Metalness: 1.0, Rauheit: 0,0});
t = neue drei.mesh (Geometrie, Material);
t.Rotation.x = math.pi / 180 * -10;
Szene.Add (t);

12. Fügen Sie Rotation und Kameraziel hinzu

Um sicherzustellen, dass die Kamera immer Ihr Hauptobjekt ansieht, verwenden Sie die Camera.Lokat-Funktion. Sie können Ihrem Objekt auch auch etwas Umgebungsrotation hinzufügen.

Aktualisieren Sie Ihren animierten Funktionscode, um so auszusehen.

 AnfrageArnimationsframe (animieren);
t.Rotation.Y - = 0.005;
Kamera.Lobat (t.Position);
Renderer.Render (Szene, Kamera); 

13. Partikelschleife hinzufügen

Fügen Sie der Szene als nächstes einige Umgebungspartikel hinzu. Diese werden sich mit der Vordergrund-Videoschleife nett mischen, die Sie später hinzufügen und interaktiv sind. Fügen Sie eine einfache "für" -Refe hinzu, um den Code zu halten, mit dem Sie mehrere Partikel erstellen können.

 für (i = 0; i & lt; = num; i ++) {
// Der Teilchencode geht hierher
} 

14. Partikelgitter erstellen

Das erste, was man tun soll, ist das Partikelobjekt zu erstellen. Sie könnten dies mit Kugeln, Sprites oder einem von Ihnen gewünschten Objekt tun. Versuchen Sie jetzt, sie einfach zu machen, um einfache Kugeln zu machen.

In Ihrer für Loop fügen Sie den folgenden Code hinzu.

 // Neues Netz erstellen
VAR-Geometrie = neue drei.SphereufferGergeometrie (0,6,6);
VAR-Material = Neues drei.meshphysicalmaterial ({envmap: envmap, Metalness: 1.0});
VAR-Partikel = neue drei.mesh (Geometrie, Material);

15. Setzen Sie die Zufallsstellung und Entfernung ein

Die Partikel werden das zentrale Objekt umkreisen und sollten zufällig positioniert sein, sodass sie den Raum gut füllen und einen organischen Look haben. Fügen Sie den folgenden Code hinzu, um eine unregelmäßige Position einzustellen, und weisen Sie für jedes Partikel einen konstanten Abstand zu.

 // Zufällige Position einstellen
partikel.position.set (math.random () * 100.0 -
50,0,0,0, math.random () * - 10.0);
// Calc distnace als konstant und weisen Sie zuweisen
ein Objekt
var a = neue drei.vector3 (0, 0, 0);
var b = partikel.position;
Var d = a.distanceto (b);
partikel.distanz = d;

16. Richten Sie Winkel für Umlaufbahnen ein

Fügen Sie die Winkelkonstanten für die Umlaufbahnen die Animation der Umlaufbahnen für die Abbitten hinzu und speichern Sie sie als Eigenschaft des Partikels. Fügen Sie den folgenden Code hinzu, um diese zufälligen Inhaltswinkel zu definieren.

 // Definieren Sie 2 zufällige, aber konstante Winkel
in Radiden
partikel.radians = math.random () * 360 * mathematisch.
Pi / 180; // anfänglicher Winkel.
partikel.radians2 = math.random () * 360 * mathematisch.
Pi / 180; // anfänglicher Winkel.

17. Fügen Sie Partikel an Szene und Sammlung hinzu

Fügen Sie zuletzt das Partikel in die Szene und an das Objektfeld, das Sie früher definiert haben. Dadurch können Sie alle Partikel später einfach einlädt.

 // Objekt zur Szene hinzufügen
Szene.de (Partikel);
// zur Sammlung hinzufügen
Objekte.Push (Partikel);

18. Fügen Sie Partikel an der Animation hinzu

Als Nächstes müssen Sie die Position und die Rotation Ihrer Partikelobjekte aktualisieren. Diese Umlaufbahn in einer ständigen Entfernung vom Szenenzentrum. Fügen Sie Ihrer Animate-Funktion den folgenden Code hinzu.

 für (i = 0; i & lt; = num; i ++) {
Var o = Objekte [I];
o.Rotation.Y + =. 01;
if (i% 2 == 0) {
o.radians + =. 005; o.radians2 + =. 005;
} else {
o.radians - =. 005; o.radians2 - =. 005;
}
o.position.x = (mathm.cos (o.radians) *
o.timance);
o.position.z = (math.sin (o.radians) *
o.timance);
o.position.y = (math.sin (o.radians2) *
o.Distanz * .5);
}

19. Fügen Sie einen Titel hinzu

Fügen Sie anschließend einen Titel in der Mitte des Bildschirms hinzu - ein Name, um Ihre Marke vorzustellen. Der Briefabstand für Titel liefert einen tollen Filmblick. Verwenden Sie einen beliebigen Schriftart / Stil, den Sie mögen, sondern schauen Sie sich Filmtitelreferenzen für Inspiration an. Siehe unsere Liste von Freie Schriftarten Für eine Liste unserer bevorzugten herunterladbaren Schriften.

Fügen Sie zuerst das DOM-Element für Ihren Titel hinzu. Fügen Sie dies nach den Skript-Tags vor dem Schließkörper-Tag hinzu.

 & lt; H1 & GT; relative Studios & lt; / h1 & gt;

Fügen Sie Ihren Style-Tags oben in Ihrer Datei die folgenden Stile für Ihren Titel hinzu.

 H1 {Farbe: weiß; Position: absolut; oben: 50%;
Z-Index: 100; Breite: 100%; Text-ALIGN: CENTER;
Transformation: Übersetzen (0, -100%); Schriftfamilie:
'Raleway', Sans-Serif; Font-Gewicht: 100;
Briefabstand: 40px; Text-Transformation:
Großbuchstaben; Schriftgröße: 16px; }

20. Fügen Sie eine Videoschleife hinzu

Ein schöner Trick, um Tiefe zu Ihrer Landung zu schaffen, besteht darin, eine kleine Videoschleife hinzuzufügen. Sie können Rauch, Staub oder Partikel verwenden. Diese sind weitgehend online oder einen Teil einer Vielzahl von Video- und Filmmaking-Paketen verfügbar. Fügen Sie das folgende Video-Tag nach Ihrem H1-Tag hinzu. Beachten Sie, dass Sie es auf 'stummgeschaltet' und autoplay setzen möchten. Dadurch kann auch das Video auch online auf mobilen Geräten abspielen.

 ​​& lt; Video-ID = "VideoBacker" -Lop-Schleife SRC = "Assets /
snow.mp4 "autoplay gedämpft & gt; & lt; / video & gt;

Um das Video aufzubereiten, fügen Sie Ihren Styles auf dem Kopf Ihrer Seite die folgenden CSS hinzu.

 ​​#videobacker {Hintergrundgröße: Abdeckung;
Objekt-Fit: Abdeckung; Z-Index: 9; Deckkraft: .3;
Position: absolut; oben: 0px; links: 0px;
Breite: 100VW; Höhe: 100VH; Übergang: 1s.
Opacity Eask-In-Out;

21. Letter-Boxen hinzufügen

Um wirklich Ihren Landing-Page einen Cinematic-Stil zu geben, fügen Sie der Seite einige Buchstabenkästchen hinzu.

Beginnen Sie mit dem Hinzufügen der DIV-Elemente dafür.

 ​​& lt; div class = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-boden' & gt; & lt; / div & gt;

Aktualisieren Sie dann Ihre Styles, um Stile für diese beiden schwarzen Balken hinzuzufügen. Sie können diese Stile auch auf Ihren Geschmack und Ihre Bedürfnisse anpassen.

 ​​.bar-top {hintergrundfarbe: schwarz;
Höhe: 100px; Position: absolut; oben: 0;
links: 0; Z-Index: 100; Breite: 100VW;}
.bar-boden {Hintergrundfarbe: schwarz;
Höhe: 100px; Position: absolut; unten: 0;
links: 0; Z-Index: 100; Breite: 100VW;} 

Dieser Artikel erschien ursprünglich in Ausgabe 287 des Webdesigners. Kaufen Sie Ausgabe 287. oder Abonnieren Sie hier .

Weiterlesen:

• Webkomponenten: der ultimative Guide
• So erstellen Sie einen geschichteten Parallaxe-Effekt
• So fügen Sie die Animation an SVG über CSS hinzu