So erstellen Sie heute VR im Web

Die virtuelle Realität wird bis 2020 bis zu 7 Milliarden US -Dollar wert sein. Das Web wird in dieser Zeit definitiv keine ausschließlich 2D -Umgebung bleiben. Tatsächlich gibt es bereits einige einfache Möglichkeiten, VR in den Browser zu bringen. Es macht auch unglaublich Spaß, mit!

zu arbeiten

Um Ihr Entwicklungsabenteuer im virtuellen Web zu beginnen, gibt es drei potenzielle Möglichkeiten, dies zu tun:

JavaScript, drei.js und Beobachtung der Geräteorientierung
javaScript, drei.js und webvr
• (meine neue bevorzugte Methode!)
CSS und WebVR
• (noch sehr frühe Tage)

Ich gehe über jeden ein und zeige eine kurze Zusammenfassung der Funktionsweise.

Key Takeaways

Virtual Reality (VR) kann durch drei Hauptmethoden in die Webentwicklung aufgenommen werden: JavaScript, drei.js und Beobachtung der Geräteorientierung; JavaScript, drei.js und WebVR; und CSS und Webvr.
Die Methode JavaScript, Drei.Js und Beobachtungsgeräteorientierung verwendet das Gerätetechnik -Browser -Ereignis, um die Drehung und Neigung der Geräte zu erkennen, die in einem VR -Kontext die Einstellung der Kamera ermöglicht, dem Blick des Betrachters zu folgen.
javaScript, drei.js und webvr sind eine experimentelle Methode, die derzeit am besten für den Zugriff auf VR -Headset -Orientierung wie den Oculus Rift geeignet ist. Es verwendet die WebVR -API, um Zugriff auf VR -Geräteinformationen zu erhalten.
Die CSS- und WebVR -Methode, derzeit in frühen Entwicklungsstadien, zielt darauf ab, CSS 3D -Transformationen in den VR -Vollbildmodus zu integrieren.
Erstellen von VR -Erlebnissen für das Web wird als wichtiger Treiber für die Einführung der VR -Technologie angesehen, wobei die WebVR -Kesselplatte von Boris Smus als der beste Ort für Entwickler empfohlen wird, um ein VR -Erlebnis für das Web aufzubauen.

JavaScript, drei.js und Beobachtung der Geräteorientierung

Eine Art und Weise, wie die meisten Browser -basierten Virtual -Reality -Projekte derzeit funktionieren, ist das Geräte -Browser -Ereignis. Dies teilt dem Browser mit, wie das Gerät ausgerichtet ist, und ermöglicht es dem Browser, wenn es gedreht oder geneigt wurde. Diese Funktionalität innerhalb einer VR -Perspektive ermöglicht es Ihnen, zu erkennen, wenn sich jemand umsieht und die Kamera anpasst, um ihrem Blick zu folgen.

Um eine wundervolle 3D -Szene innerhalb des Browsers zu erreichen, verwenden wir drei.js, ein JavaScript -Framework, das es einfach macht, 3D -Formen und -szenen zu erstellen. Es nimmt den größten Teil der Komplexität heraus, ein 3D -Erlebnis zusammenzustellen, und ermöglicht es Ihnen, sich auf das zu konzentrieren, was Sie in Ihrer Szene zusammenstellen möchten.

Ich habe hier an SitePoint zwei Demos geschrieben, die die Geräteorientierungsmethode verwenden:

• VR mit Google Cardboard und drei.js
ins Web bringen
• ins Web.

Visualisieren eines Twitter -Streams in VR mit drei.js und Knoten

Wenn Sie neu zu drei.Js sind und wie man eine Szene zusammenstellt, empfehle ich, mich die beiden oben genannten Artikel für eine ausführlichere Einführung in diese Methode anzusehen. Ich werde hier Schlüsselkonzepte behandeln, aber es wird auf einer höheren Ebene sein.

Die Schlüsselkomponenten jeder dieser diese umfassen die folgenden JavaScript -Dateien (Sie können diese Dateien aus den oben genannten Beispiel -Demos abrufen und finden sie auch in den Drei.js -Beispielen Download):
• drei.min.js - Unser drei.js Framework
• DeviceorientationControls.js - Dies ist das drei.js -Plugin, das die oben diskutierte Geräteorientierung liefert. Es bewegt unsere Kamera, um die Bewegungen unseres Geräts zu erfüllen.
• orbitcontrols.js - Dies ist ein Sicherungscontroller, mit dem der Benutzer die Kamera mit der Maus bewegen kann, wenn wir kein Gerät haben, das Zugriff auf das Geräteorientierungsereignis hat.

stereoeffect.js - Ein Drei.js -Effekt, der den Bildschirm in ein stereoskopisches Bild aufteilt, das für jedes Auge etwas anders ist, genau wie in VR. Dadurch wird der tatsächliche VR -Split -Bildschirm erstellt, ohne dass wir etwas Kompliziertes tun müssen.

Geräteorientierung

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Der Code zum Aktivieren der Geräteorientierungsteuerungen sieht so aus:

Der Listener für GeräteOrientierungsereignisse bietet einen Alpha-, Beta- und Gamma -Wert, wenn er über ein kompatibles Gerät verfügt. Wenn wir keinen Alpha -Wert haben, ändert dies unsere Steuerelemente nicht für die Verwendung der Geräteorientierung, sodass wir stattdessen Orbit -Steuerelemente verwenden können.

Wenn er diesen Alpha -Wert hat, erstellen wir eine Steuerungssteuerung für Geräteorientierungen und geben ihm unsere Kamera -Variable zur Steuerung an. Wir setzen es auch so, dass wir unsere Szene auf Vollbild setzen, wenn der Benutzer auf den Bildschirm klopft (wir möchten nicht auf die Adressleiste des Browsers in VR starren).

Orbit Controls

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

Wenn dieser Alpha -Wert nicht vorhanden ist und wir keinen Zugriff auf das Geräteorientierungsereignis haben, bietet diese Technik stattdessen ein Steuerelement, um die Kamera durch Ziehen mit der Maus zu bewegen. Das sieht so aus:

Die wichtigsten Dinge, die aus dem obigen Code verwirrend sein könnten, sind Nopan und Nozoom. Grundsätzlich möchten wir uns nicht über die Maus um die Szene bewegen und wir möchten nicht in der Lage sein, ein- oder auszoomen - wir möchten uns nur umsehen.

Stereo -Effekt

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Um den Stereo -Effekt zu verwenden, definieren wir ihn so:

effect<span>.setSize(width, height);</span>

Dann aktualisieren wir in der Größe des Fensters seine Größe:

effect<span>.render(scene, camera);</span>

In jedem RequestAnimationFrame setzen wir die Szene, um unsere Wirkung durchzusetzen:

Das sind die Grundlagen, wie der Geräteorientierungsstil des Erzählens von VR funktioniert. Es kann für eine schöne und einfache Implementierung mit Google Cardboard effektiv sein, ist jedoch für den Oculus Rift nicht ganz effektiv. Der nächste Ansatz ist für den Riss viel besser.

javaScript, drei.js und webvr

Möchten Sie wie der Oculus Rift auf VR -Headset -Orientierung zugreifen? WebVR ist im Moment der Weg, dies zu tun. WebVR ist eine frühe und experimentelle JavaScript -API, die Zugriff auf die Funktionen von Virtual -Reality -Geräten wie Oculus Rift und Google Cardboard bietet. Derzeit ist es in Firefox -Nacht und ein paar experimentelle Builds von mobilem Chrom und Chrom erhältlich. Eine Sache, die Sie beachten sollten, ist, dass die Spezifikation immer noch im Entwurf steht und sich ändern kann. Experimentieren Sie also damit, aber wissen Sie, dass Sie möglicherweise die Dinge im Laufe der Zeit anpassen müssen.

Insgesamt bietet die WebVR -API Zugriff auf die VR -Geräteinformationen über:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Ich werde hier nicht auf viele technische Details eingehen (ich werde dies in einem eigenen zukünftigen SitePoint -Artikel genauer behandeln!), Wenn Sie mehr herausfinden möchten, lesen Sie den Entwurf des WebVR -Editors. Der Grund, warum ich damit nicht ins Detail gehe, ist, dass es eine viel einfachere Methode zur Implementierung der API gibt.

Diese oben genannte Methode zur Implementierung der WebVR -API besteht darin, die WebVR -Kesselplatte von Boris Smus zu verwenden. Es bietet ein gutes Maß an Basisfunktionalität, die WebVR implementiert und die Erfahrung für verschiedene Geräte anmutig verschlechtert. Es ist derzeit die schönste Web -VR -Implementierung, die ich gesehen habe. Wenn Sie ein VR -Erlebnis für das Web erstellen möchten, ist dies derzeit der beste Startort!

Um diese Methode zu verwenden, laden Sie die WebVR -Boilerplate auf GitHub herunter.

Sie können sich auf die Bearbeitung des Index.html und die Verwendung aller Dateien in dieser Einrichtung konzentrieren oder die spezifischen Plugins von Grund auf in Ihr eigenes Projekt implementieren. Wenn Sie die Unterschiede in jeder Implementierung vergleichen möchten, habe ich meine Visualisierung eines Twitter -Streams in VR mit drei.js- und Knotenbeispielen in einen WebVR -Twitter -Stream in VR.

migriert

, um dieses Projekt von Grund auf selbst in Ihre eigenen einzubeziehen, die Dateien, die Sie haben möchten, sind:

• drei.min.js - Unser drei.js -Framework natürlich
• vrcontrols.js - Ein Drei.js -Plugin für VR -Steuerelemente über WebVR (dies finden Sie in Bower_Components/ThreeJS/Beispiele/JS/Controls/Vrcontrols.js im Boilerplate -Projekt)
vreffect.js - Ein Drei.js -Plugin für den VR -Effekt selbst, der die Szene für einen Oculus -Rift anzeigt (dies finden Sie in Bower_Components/ThreeJS/Beispiele/js/effekte/vreffect.js im Boilerplate -Projekt)
webvr-polyfill.js-Dies ist eine Polyfill für Browser, die WebVR noch nicht vollständig unterstützt Code)
webvr-Manager.js-Dies ist Teil des Boilerplate-Codes, der alles für Sie verwaltet, einschließlich der Bereitstellung einer Möglichkeit, den VR-Modus einzugeben und zu beenden (dies finden Sie in Build/webvr-Manager.js)

implementiert es erfordert nur wenige Anpassungen aus der Geräteorientierungsmethode. Hier ist eine Übersicht für diejenigen, die diese Methode ausprobieren möchten:

Steuerelemente

Die VR -Steuerelemente sind recht einfach eingerichtet. Wir können einfach ein neues VRControls -Objekt der zuvor verwendeten Steuerelemente zuweisen. Die Steuerelemente und Geräteorientierungssteuerungen sollten nicht erforderlich sein, da die Kesselplatte nun ohne VR -Funktionen für Browser sorgen sollte. Dies bedeutet, dass Ihre Szene auch auf Google Cardboard auch immer noch recht gut funktionieren sollte!

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

vr effekt

Der Effekt ist der Implementierung sehr ähnlich wie die Stereoeffect. Ersetzen Sie diesen Effekt einfach durch unseren neuen Vreffect One:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

wir machen diesen Effekt jedoch nicht in dieser Methode durch. Stattdessen machen wir unseren VR -Manager durch.

VR Manager

Der VR -Manager kümmert sich um all unsere VR, die in das Eintritt/Verlassen und so weiter eintritt, also wird hier unsere Szene endlich gerendert. Wir haben es zunächst über Folgendes eingerichtet:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Der VR -Manager bietet eine Taste, mit der der Benutzer den VR -Modus eingeben kann, wenn er sich in einem kompatiblen Browser befindet, oder Vollbild, wenn sein Browser nicht in der Lage ist, VR zu erhalten (Vollbild ist das, was wir für Mobilgeräte wollen). Der Parameter aus Versteck sagt, ob wir diese Taste ausblenden möchten oder nicht. Wir wollen es definitiv nicht verbergen!

Unser Render -Anruf sieht dann so aus, dass es eine Zeitstempelvariable verwendet, die aus unserer update () -Funktion von drei.js () stammt:

effect<span>.setSize(width, height);</span>

Mit all dem, dass Sie eine funktionierende VR -Implementierung haben, die sich je nach Gerät in verschiedene Formate übersetzt.

.

wird Renderer.getSize () einen Fehler zurückgeben? Dies hat mich für ein paar Stunden verrückt gemacht, aber alles, was Sie tun müssen, um dies zu beheben, ist: Aktualisieren Sie drei.js!

Wie sieht die WebVR -Boilerplate in Aktion

aus

Hier ist die Ansicht meines Twitter -Beispiels auf einem Browser, der VR unterstützt:

Hier ist es in der Oculus Rift -Ansicht, die angezeigt wird, wenn Sie auf das VR -Symbol klicken:

So sieht die Ansicht auf einem Smartphone aus, die Geräteorientierung ermöglicht es uns immer noch, sich in der Szene umzusehen, und wir haben keinen geteilten Bildschirm. Eine großartige Reaktionsansicht des Inhalts:

Wenn wir auf dem VR -Symbol auf Mobilgeräten klicken, erhalten wir eine Vollbildansicht für Google Cardboard -Stilgeräte:

CSS und WebVR

Mozilla will auch VR -Betrachtungsfähigkeiten in den Browser in den Nachtversionen von Firefox bringen, aber es sind ziemlich frühe Tage! Ich hatte nicht viel Glück, es auf meinem Mac und Oculus eingerichtet zu haben. Die Arten von Konventionen, die Vladimir Vukićević von Firefox erwähnt hat, umfasst die Integration von CSS 3D mit dem VR -Vollbildmodus.

als Beispiel aus Vladimirs Blog-Beitrag sagt er, dass Elemente mit Transform-Stil: Preserve-3D zweimal von den beiden Standpunkten aus rendern sollten, um es in VR:

zu bringen

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Wenn Sie Demos mit VR und CSS kennen, lassen Sie es mich bitte wissen! Ich konnte keine Aufspürung aufspüren. Die Idee, den HTML- und CSS -Teil des Web in VR zu bringen, ist ohne Zweifel ein wirklich faszinierendes Konzept. Es ist unvermeidlich, dass das Web irgendwann in das VR -Bereich eingeht, da wir uns alle langsam auf VR -Geräte wechseln!

Schlussfolgerung

Die Welt der Technologie wird in den kommenden Jahren langsam aber sicher die virtuelle Realität annehmen, da unsere technologischen Fähigkeiten mit unseren wilden Bestrebungen übereinstimmen! Das einzige, was die VR -Akzeptanz und ihr Wert vorantreiben wird, ist Inhalt. Wir müssen VR -Inhalte für VR -Nutzer herausholen, um es zu genießen! Was gibt es Schöneres und einfacher als über das Web?

Wenn Sie den Sprung wagen und eine VR -Demo mit diesem Code erstellen, teilen Sie ihn bitte in den Kommentaren oder wenden Sie sich auf Twitter (@thatpatrickGuy) mit mir in Verbindung. Ich würde gerne meinen Oculus Rift oder Google Cardboard anziehen und ihn für einen Spin!

nehmen

Ich habe eine Reihe von kuratierten Links zu VR und AR über JavaScript für diejenigen, die nach einer kurzen Referenz suchen. Besuchen Sie Dev Diner und schauen Sie sich mein Dev Diner VR und AR mit dem JavaScript -Entwicklerhandbuch an, voller in diesem Artikel erwähnter Links, anderen großartigen SitePoint -Artikeln und mehr. Wenn Sie andere großartige Ressourcen haben, die ich nicht aufgelistet habe, lassen Sie es mich bitte auch wissen!

häufig gestellte Fragen zum Erstellen von VR im Web

Was sind die Voraussetzungen, um VR im Web zu erstellen? Sie sollten auch mit WebGL vertraut sein, einer JavaScript -API zum Rendern von 2D- und 3D -Grafiken. Das Wissen von drei.js, einer beliebten JavaScript -Bibliothek zum Erstellen von 3D -Grafiken, ist ebenfalls von Vorteil. Darüber hinaus sollten Sie über ein VR-Headset verfügen, um Ihre VR-Erlebnisse zu testen. Seien Sie verwendet, um VR -Erlebnisse zu erstellen. Drei.js vereinfacht den Prozess der Arbeit mit WebGL, während Sie mit A-Frame VR-Szenen mithilfe der HTML-ähnlichen Syntax erstellen können. Mit diesen Tools können Sie 3D -Objekte erstellen, Texturen und Beleuchtung hinzufügen und die Kamerabewegungen steuern. Dies bietet Unterstützung für verschiedene Virtual -Reality -Geräte wie Oculus Rift, HTC Vive und Google Cardboard in einem Webbrowser. Es ermöglicht den Entwicklern, immersive VR -Erlebnisse im Web zu erstellen, auf die jeder mit einem VR -Gerät und einem kompatiblen Browser zugänglich ist. 🎜> JavaScript ist die primäre Sprache für die Webentwicklung, einschließlich VR. Sie können jedoch Sprachen verwenden, die zu JavaScript kompilieren, wie z. B. TypeScript oder Coffeescript. Darüber hinaus können Sie mit WebAssembly den Code ausführen, der in Sprachen wie C mit nahezu nativer Geschwindigkeit im Browser geschrieben wurde.

Wie kann ich meine VR-Erlebnisse für das Web optimieren? Das Web beinhaltet die Reduzierung der Latenz, die effiziente Verwaltung des Speichers und die Optimierung des Renders. Sie können Techniken wie asynchrones Laden, Texturkomprimierung und Detailniveau (LOD) verwenden, um die Leistung zu verbessern. Berücksichtigen Sie außerdem die Einschränkungen der Hardware- und Netzwerkbedingungen des Benutzers. Sie können beispielsweise die API von Deviceorientation verwenden, um den Benutzern die VR -Szene zu erkunden, indem sie ihr mobiles Gerät verschieben. Sie können auch eine 360-Grad-Ansicht bereitstellen, die Benutzer mit Maus oder Berührung navigieren können.

Wie kann ich meine VR-Erlebnisse im Web testen? VR -Headset. Wenn Sie kein Headset haben, können Sie die WebVR -Emulatorerweiterung für Chrome und Firefox verwenden. Dieses Tool simuliert die WebVR-API und bietet eine 3D-Ansicht der VR-Szene. In drei.Js, um Ihre 3D-Modelle in einem Format zu exportieren, das A-Frame lesen kann. GLTF (GL -Transmissionsformat) ist ein Standard -Dateiformat für 3D -Szenen und -modelle.

Was sind einige Herausforderungen, denen ich beim Erstellen von VR im Web stehen könnte? Darüber hinaus kann das Erstellen von realistischen 3D -Grafiken und -Animationen komplex sein.

Wo kann ich mehr über das Erstellen von VR im Web erfahren? Die WebVR -Dokumentation von Mozilla ist ein guter Ausgangspunkt. Sie können auch Tutorials und Beispiele auf den drei.js- und a-Frame-Websites ansehen. Darüber hinaus gibt es zahlreiche Online -Communities, in denen Sie Fragen stellen und Ihre Arbeit teilen können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie heute VR im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!