Erste Schritte mit webvr

Webvr ist eine JavaScript-API zum Erstellen von 3D-Virtual-Reality-Erlebnissen im Browser. Dies erfordert eine geringe Latenz, hohe Bildrate und eine hervorragende Leistung. Sein Ziel ist es, dass es jedem erleichtert wird, in VR-Erlebnisse zu gelangen, indem Sie die Eintrittsbarrieren senken.

WebGL ermöglicht es den Entwicklern, auf mobilen Geräten und Desktop-Browsern Rich-Konsolenqualitätserfahrungen zu erstellen, die in Echtzeit in Echtzeit rendern (sorgen einfach dafür Web-Hosting Recht auf optimale Fähigkeit). Nahezu universelle Browser- und Geräteunterstützung macht es zu einem perfekten Ansatz für Webentwickler, die unglaubliche VR-Erlebnisse erstellen möchten. Hier zeigen wir Ihnen, wie Sie mit Webvr beginnen können. Am Ende dieses Artikels finden Sie einige hilfreiche Ressourcen, um Ihr Wissen weiter zu fördern.

In unserem Tutorial verwenden wir Webvr in Kombination mit drei.js. - eine Go-to-Option der vielen Webdesign-Tools. Verfügbar für 3D und VR im Web. Es ist kostenlos und offene Quelle, leichte und unzählige, preisgekrönte Websites verwenden es. Andere als ein JavaScript-Hintergrund, Sie können dieses Tutorial ohne vorherige Kenntnisse eintauchen und Ihre erste Webvr-Erfahrung erstellen. Das Ziel dieses Tutorials ist es, Sie aufzunehmen und zu inspirieren, um diese sehr aufregende Technologie weiter zu erkunden. Willst du etwas einfacher? Versuchen Sie A. Webseitenersteller .

• Laden Sie die Dateien für dieses Tutorial von Dateisilo herunter

01. Aktivieren Sie das Webvr-Flag in Chrome

Webvr ist immer noch eine experimentelle Technologie und erfordert, dass HTTPS auf Ihrem Server ausgeführt wird. Es läuft nicht auf mobilen Geräten ohne Polyventil.github.com/immersive-web/webvr-polyfill. . Sie können jedoch Inhalte lokal in Chrome zum Testen und Gebäude führen. Stellen Sie sicher, dass Sie das Chrom-Webvr-Flag ermöglichen. Art Chrome: // Flags / Enable-WebVR in Ihren URL-Browser, und klicken Sie dann auf Aktivieren, um sie zu aktivieren. Möglicherweise müssen Sie Chrome auch neu starten.

02. Installieren Sie das WebvR-API-Emulations-Plugin installieren

Um lokal auf Ihrem Desktop zu testen und das Bedarf an einem Gerät zu vermeiden, gibt es ein großartiges Plugin, das Sie auf Chrome mit clickTorelease verwenden können. Das Plugin emulatiert ein VR-Headset. für Sie und erlauben Sie, das Headset praktisch zu bewegen und zu drehen ( Holen Sie es hier ).

03. Geräte-Symbolleiste in Entwickler-Tools öffnen

Um ein mobiles Gerät oder ein Headset zu emulieren, funktioniert es am besten, die Geräteemulation in Chrome-Tools zu verwenden. Öffnen Sie die Entwicklertools in Chrome und wechseln Sie auf der Geräte-Symbolleiste, um die mobile Ansicht zu sehen, um die Landschaft zu drehen, und wählen Sie die Favoriten-Telefonemulation aus.

04. Erstellen Sie eine grundlegende HTML-Datei

Als Nächstes müssen Sie eine grundlegende HTML-Datei einrichten. Sie können externe CSS- und JavaScript-Dateien einrichten oder inline zur Vereinfachung einschließen. Die Renderer-Klasse von drei.js erstellt a & lt; canvas & gt; Element für Sie. Fügen Sie Ihrem folgenden Code hinzu index.html. Datei:

 & lt; html lang = "de" & gt;
& lt; head & gt;
& lt; Titel & GT; webvr Demo & lt; / title & gt;
& lt; Meta Charset = "UTF-8" & GT;
& lt; Meta Name = "Ansichtsfenster" Inhalt =
"Width = Geräteweiten, Initial-Scale =
1.0, user-skalierbar = Nein "& 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;
// Code wird hierher gehen
& lt; / script & gt;
& lt; / body & gt; 

05. Three.js-Klassen einschließen

Fügen Sie einen Link mit der drei.js-Bibliothek in den Kopf Ihrer Datei ein - entweder extern, oder laden Sie ihn aus dem Three.js-Repository herunter. Sie benötigen auch die neue Webvr-Klasse und die Boxlinegeometrieklasse für dieses Tutorial. Sie finden die Bibliothek und die unterstützenden Klassen Hier . Hinweis: Der Code in diesem Tutorial wurde auf der neuesten Version von drei.js v99 getestet.

 & lt; Skript SRC = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; Skript SRC = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; Skript SRC = "libs / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. Fügen Sie globale Variablen hinzu

Fügen Sie zwischen den Skript-Tags für den Code die folgenden globalen Variablen hinzu, um weltweit auf die Kamera, die Szene, die Rendere, Objekte und Raycaster zuzugreifen. Füge auch A hinzu SCHLAGEN Variable, um Objekte zu verfolgen, die vom Blick der Kamera durchschnitten werden. Dies zeigt, wie er weiß, was ein Benutzer in VR betrachtet.

 var uhr = new drei.uhr ();
VAR-Container, Kamera, Szene, Renderer, Raum,
crosa, getroffen;
VAR-Objekte = []; // Sammlung von Objekten
var num = 100; // Anzahl der Objekte
var raycaster = new three.raycaster (); 

07. Erstellen Sie eine 3D-Szene

Sie werden eine grundlegende 3D-Szene hinzufügen, die der Container für Ihre Objekte ist. Die Szene ist die Bühne, die mit der Kamera rendern wird. Alle 3D-Präsentationen verfügen über eine Szene oder eine Phase einiger Form. Was in dieser Phase ist und angesichts der Kamera das ist, was der Benutzer sehen wird. Fügen Sie den folgenden Code hinzu, um eine Szene hinzuzufügen:

 // Erstellen Sie ein Szenenobjekt
Var-Szene = neue drei.szene (); 

08. Fügen Sie eine perspektivische Kamera hinzu

Als Nächstes müssen Sie eine Kamera hinzufügen. Sie verwenden die Perspektivenkamera, die für 3D-Szenen gedacht ist. Das erste Attribut ist das Sichtfeld der Kamera. Das zweite ist das Seitenverhältnis ( Breite Höhe ). Dann können Sie die nahegelegene Beschneidungsebene und die weitaus CLIPING-Ebene-Entfernungen angeben, die definieren, was für die Kamera sichtbar sein soll.

 // Kamera erstellen
Kamera = neue drei.perspektivecamera
(70, fenster.innerwidth / fenster.innerhöhe,
0,1, 1000);
Szene.Add (Kamera); 

09. Fügen Sie einen Renderer und ein Canvas-Element hinzu

Der Renderer verarbeitet die Zeichnung der Objekte in Ihrer Szene, die für die Kamera sichtbar sind. Stellen Sie die Antialias-Eigenschaft auf true, um glatte Kanten auf das Objekt zu erhalten. Der Renderer erstellt a dominieren Das ist eigentlich ein HTML & lt; canvas & gt; Element. Sie können dann an den Körper anhängen. Beachten Sie die Verwendung des neuen VR-fähigen Flags des Renderers.

 Renderer = neuer drei.webglrenderer (
{Antialias: True});
Renderer.SetPixelratio (Fenster.
DevicePixelratio);
Renderer.Setsize (window.innerwidth, Fenster.
innerhöht);
renderer.vr.enabled = true;
document.body.appendchild (Renderer.
Dominement); 

10. Kamera Fasthair hinzufügen

Um den Anwendern auf den Fokus der Kamera zu helfen, ist es gut, ein Fadenkreuz oder ein Targeting-Symbol vor der Kamera hinzuzufügen. Sie können es direkt zum Kameraobjekt hinzufügen, so dass es immer dort ist, wo es sein sollte.

 coodhair = new drei.mesh (
Neue Three.ReRingbuffergeometrie (0,02, 0,04, 32),
Neues drei.meshbasicmaterial ({
Farbe: 0xFFFFFF,
Deckkraft: 0,5,
transparent: true.
})
);
crowhair.position.z = - 2;
Kamera.add (Fadenhair); 

11. Erstellen Sie ein VR-Raumobjekt (optional)

Erstellen Sie als nächstes ein einfaches Zimmerobjekt. Das ist schön, dem Benutzer ein Gefühl der Orientierung in der VR-Welt zu geben. Es erstellt eine einfache Room-Box mit Linien, um die Wände, den Boden und die Decke anzuzeigen.

 Raum = neue drei.linesegments (
Neue drei.BoxineGeometrie (6, 6, 6, 10, 10, 10),
Neue drei.linebasicmaterial ({color:
0x808080}));
Raum.Position.Y = 2;
Szene.Add (Raum); 

12. Fügen Sie der Szene Lichter hinzu

Um die Szene anzuzünden, verwenden wir ein einfaches Hemisphäre-Licht und ein Richtungslicht. Es gibt eine schöne Umgebungssüchtigkeit und eine realistische Schattierung von einer einheitlichen Lichtquelle.

 szene.add (neues drei.hemispherelight
(0x806060, 0x404040);
var leichte = neue drei.direktionallight
(0xffffff);
light.Position.set (1, 1, 1) .Normalize ();
Szene.de (licht); 

13. Erstellen Sie einige Objekte

Sie werden den Raum als nächstes mit Objekten füllen. Wenden Sie sie zufällig um den Raum auf. Sie werden auch die Rotation und den Saal für Sorten zufällig einstellen. Sie können im nächsten Schritt ein bisschen mehr Code hinzufügen, wo es sagt Anlegen von Orbitattributen um einige benutzerdefinierte Orbitpfade zu ermöglichen.

 VAR-Geometrie = neue drei.boxbuffergeometrie
(0,15, 0,15, 0,15);
für (i = 0; i & lt; = num; i ++) {
VAR-Material = Neues Drei.Maserlambertmaterial
({color: math.random () * 0xffffff});
var objekt = new drei.mesh
(Geometrie, Material);
object.position.set (mathe.random () * 4.0
- 2.0, math.random () * 4.0 - 2.0, Mathematik.
zufällig () * 4.0 - 2.0);
object.scale.set (mathe.random () +. 5, Mathematik.
zufällig () +. 5, math.random () +. 5);
object.Rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, Mathematik.
zufällig () * 2 * math.pi);
// Erstellen von Orbitattributen} 

14. Hinzufügen von Orbitattributen an Objekte

So aktivieren Sie einige nette zufällige umlaufende Bewegungen und lassen Sie die Objekte von 'Eiden des Raums entkommen', weisen wir einige anfängliche Winkeldaten (in Radianten) und eine Entfernung zu. Es ermöglicht einen einfachen Weg, um die Objekte in der Render-Schleife nach zu animieren.

 // Anlegen von Orbitattributen
// Rechenabstand als konstant und zuweisen
Objekt
var a = neue drei.vector3 (0, 0, 0);
var b = objekt.position;
Var d = a.distanceto (b);
objekt.Distanz = D;
object.radians = math.random () * 360 * Mathematik.
Pi / 180; // anfänglicher Winkel.
object.radians2 = math.random () * 360 * Mathematik.
Pi / 180; // anfänglicher Winkel.
object.radians3 = math.random () * 360 * Mathematik.
Pi / 180; // anfänglicher Winkel.
Raum.add (Objekt);
Objekte.Push (Objekt); 

15. Fügen Sie ein Fenster hinzu Größe der Größe des Handlers

Wenn wir unsere Webvr-App testen, ändern wir den Bildschirm, und bewegen Sie es in der Umgebung und so weiter. Es ist eine gute Idee, einen Handler zu haben, der die Dimensionen des Rendernbereichs anpasst und Dinge aktualisiert, um den Bildschirm richtig zu füllen und nett auszusehen.

 Window.AdDeventListener ('RESIZE',
onwindowResize, falsch);
Funktion onWindowResize () {
camera.aspect = window.innerwidth / fenster.
Innhöhe;
camera.updateProjektionMatrix ();
Renderer.Setsize (fenster.innerwidth,
fenster.innerhöhe);
} 

16. Erstellen Sie die Webvr-Taste

Die neue Webvr-Klasse von drei.js enthält eine Webvr-Schaltfläche, die für uns umgeschaltet und aus dem VR-Modus umgeschaltet wird. Es handhabt auch, wenn das Gerät den VR-Modus nicht unterstützt. Sie können es mit diesem einfachen Code einschließen:

 // drei.js webvr-Taste zum Eingeben /
Beenden Sie den VR-Modus
document.body.appendchild (webvr.createbutton.
(Renderer)); 

17. Starten Sie die VR-Animationsschleife

In der Regel wären Sie die AnfrageArbeitsrame. Um mit der Render-Schleife zu handhaben, müssen Sie jedoch in VR einen anderen Loop-Handler verwenden, um sicherzustellen, dass alles bereit ist, um zu rendern, und dass Sie Latenzzeiten vermeiden und Probleme rendern. Verwenden Sie stattdessen das neue setanimationloop und geben Sie Ihre Render-Funktion weiter.

 // Starten Sie die VR-Animationsschleife
Renderer.SetAnimationLoop (Render); 

18. Erstellen Sie die Render-Funktion

Erstellen Sie als nächstes eine Render-Funktion. Wenn Sie Ihre Objekte nicht animieren oder testen möchten, dass die Kamera / Fadenkreuzschiene mit Objekten kreuzen, können Sie einfach den folgenden Code verwenden:

 Funktion Render () {
// Kreuzungen finden.
// Animieren Sie die Objekte an
// Rendern Sie die Szene
Renderer.Render (Szene, Kamera);
} 

19. Test für Schnittpunkte

Um den Test für Objekte zu aktivieren, die den Ray von der Kamera in Z-Leerzeichen verfolgen, fügen Sie Ihrer Render-Schleife den folgenden Code hinzu, wo Sie ihn im letzten Schritt kommentieren:

 Raycaster.SetFromCamera ({x: 0, y: 0},
Kamera);
VAR Intersects = Raycaster.IntersectObjects
(zimmer.children);
if (schneidet.länge & gt; 0) {
Wenn (Hit! = Kreuzungen 
 .Object) {
wenn (getroffen) {hit.material.emissive.
Sethex (Hit.currentrex); }
Hit = Kreuzungen 
 .Object;
Hit.currentrex = Hit.material.emissive.
GetHex ();
Hit.material.emissive.sethex (0x00ff00);
}
} else {
Wenn (Treffer) {hit.material.emissive.sethex
(Hit.currentrex); }
Hit = undefined;
} 

20. Animieren Sie Gegenstände entlang der Umlaufbahnen

Als Nächstes können Sie Ihre Objekte in ihren Orbitpfaden mit diesem Code animieren:

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

21. Rendern Sie die Webvr-Szene

Schließlich können Sie Ihre Szene mit den verwendbaren Renderfunktionen ausführen. Wenn Sie diese Zeile noch nicht hinzugefügt haben, tun Sie es jetzt. Sobald Sie dies hinzugefügt haben, können Sie alles ausprobieren und sollten eine Webvr-Szene-Rendering in Ihrem Browser sehen. Sie können es auch auf Ihrem mobilen Gerät oder einem VR-Headset überprüfen.

 // Rendern Sie die Szene
Renderer.Render (Szene, Kamera); 

Webvr-Ressourcen

Erste Schritte in Webvr kann überwältigend sein. Wir haben einige Beispiele von Websites mit Webvr und Ressourcen zusammengebaut, um das Rollen zu erleichtern.

SketchFab.
Sie kennen diese Site wahrscheinlich bereits aufgrund seiner erstaunlichen Galerie von Assets, aber es verfügt auch über einen Webvr-Modus, mit dem Sie in VR navigieren können.

Ein Rahmen
Dies ist ein Rock-Solid-Framework für AR und VR. Es verarbeitet die Schmerzen der Fallbacks und der Geräteunterstützung für Sie, einschließlich, in der Sie es Ihnen ermöglichen, in Ihrem Browser zum Testen zu rendern. Es ahnt sogar die Erstellung gemeinsamer 3D-Objekte ab.

Drei.js.
Diese Bibliothek hat zahlreich Beispiele mit Quellcode, um Ihnen zu helfen, mit Webvr zu gelangen. Es ist ein perfekter Ausgangspunkt.

Webvr.
Da Webvr eine aufstrebende Technologie ist, ist es eine gute Idee, mit den neuesten Entwicklungen Schritt zu halten. Sie müssen wissen, welche Geräte unterstützt werden und unter welchen Bedingungen. Diese Site hilft Ihnen, auf dem Laufenden zu bleiben. Da ist ein Seite für Beispiele gewidmet , auch.

Und es hilft immer, das Recht zu haben Cloud-Speicherung. , auch.

Dieser Artikel wurde ursprünglich in Ausgabe 283 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Ausgabe 283 kaufen oder abonnieren .

Weiterlesen:

• 7 Bonkers vr Trends gehen auf den Weg
• Beginnen Sie mit Redux Thunk
• 11 heiße Webtrends jetzt