Es ist ganz klar, dass Virtual Reality(VR) die Zukunft gehören wird. Kunstgalerien, Auktionen, Immobilien und Automobilverkäufe nutzen schon verstärkt diese Technologie. Auch Sightseeing-Touren werden nicht zu kurz kommen, da Sie jetzt die Welt mit Ihrem VR-Headset bereisen können und viele weitere tolle Beispiele.
Was ist React VR?
React VR ist eine von Oculus entwickelte JavaScript-Bibliothek mit dem Ziel, webbasierte VR-Anwendungen zu erstellen. Es kann als Teil des größeren React-Ökosystems betrachtet werden.
Erstellen einer React VR App.
Um ein React VR Projekt zu starten, installieren wir das React VR CLI Tool mit npm:
Nach der Installation erstellen wir eine neue React VR App. Wir nennen hier unser Verzeichnis viscircle.
Danach wechseln wir unser Verzeichnis zu unserer neu erstellten App.
Wir testen schließlich, ob es mit einem lokalen Server funktioniert.
Um die Anwendung in unserem lokalen Browser zu initialisieren, öffnen Sie die URL http://localhost:8081/vr. Sie sollten eine animierte VR-Umgebung wie die untenstehende sehen:
Mit dieser kurzen Einführung können Sie Ihre eigene webbasierte VR-App mit React VR erstellen. Um das volle VR-Erlebnis auskosten zu können, benötigen Sie eine Virtual Machine. Sie können auch lokal in Ihrem Browser testen, aber um Oculus Rift zu nutzen und das VR-Erlebnis zu optimieren, sollten Sie auf die Virtual Machine zurückgreifen. Sie benötigen außerdem die neueste Version von Node.js und einen Browser, der die WebVR-API unterstützt, wie z.B. FireFox Nightly. Sie müssen den Carmel Developer Preview-Browser installieren, um Ihre React VR-Anwendung über ihr Headset zu erkunden, wenn Sie ein Android-Gerät und ein Gear VR-Headset besitzen.
Beschäftigen Sie sich mit React VR.
In letzter Zeit gab es viel Aktivität in der VR-Community. Da Oculus Rift langsam die Lücke im VR-Marktanteil schließt, werfen wir einen Blick auf React-VR-Projekte, die in letzter Zeit einen bleibenden Eindruck hinterlassen haben.
LiveTourLAB.
LiveTourLAB ist ein cooles Framework zur Erstellung von Live-VR-Touren. Das LiveTourLAB-Projekt ist mit über 600 Sternen ein großer Konkurrent in der GitHub-VR-Community. Wir haben ein wenig nachgeforscht und festgestellt, dass sie über vordefinierte Komponenten verfügen, die Navigation, Vorladen, Blending-Fotografie und Vieles mehr ermöglichen. Jedes bisschen Interaktivität ist in einer JSON-Textdatei definiert und kann leicht mit benutzerdefiniertem Code erweitert werden, was bedeutet, dass wir den gleichen statistischen Code für verschiedene Touren verwenden können. Dieses Projekt bietet Touren an, die interaktiv und spannend sind. Die Touren können entweder im Internet, über ein Telefon und vor allem über ein VR-Headset abgespielt werden. Neben der praktischen Erfahrung und vordefinierten Komponenten finden Sie hier einige weitere Funktionen des Projekts:
LiveTourLABs ist Open Source, d.h. dass Beiträge und Ideen herzlich willkommen sind. Sie können am Quellcode arbeiten und sich tolle, aufmerksamkeitserregende Dinge einfallen lassen, die Sie anschließend auf GitHub übertragen können.
WebVR Experiments.
WebVR Experiments ist eine Sammlung von hilfreichen Projekten, die von Nikolaus Graf mit React VR erstellt wurden. Das bemerkenswerteste dieser Projekte ist ein 3D-Wald. Für das volle Erlebnis müssen Sie ein VR-Headset verwenden, z.B. Gear VR oder Oculus Rift. Graf hat hier erstaunliche Arbeit geleistet, indem dieser sowohl umfangreiche 3D-Modellierung als auch Computergrafik einbezog. Animationen und bewegliche Objekte sind noch nicht enthalten, aber er plant, all das so schnell wie möglich zu tun. Das Projekt ist Open-Source und Sie finden unten einen Video-Guide zu Graf`s 3D Walddemo in React Amsterdam.
CentroUI.
CentroUI wurde von Hristo Georgiev entwickelt und besteht aus wiederverwendbaren und erweiterbaren UI-Komponenten und Dienstprogrammen zur Erstellung von Schnittstellen für Web VR-Anwendungen. Es wurde mit geräte- und browserübergreifender Kompatibilität entwickelt und bietet Maps, Listen, Navigationslemente, Grids und Plug-and-Play-Text-Eingabesteuerungen. Mitwirkende aller Ebenen, einschließlich Anfänger, werden ermutigt, Beiträge zum CentroUI-Projekt zu leisten. Sie haben auch eine interaktive Demo, die Sie sicher dazu bringt, einige Dinge selbst auszuprobieren. Schauen Sie es sich hier an.
Earth-Moon-VR.
Esteban Herrera leistete mit seinem Projekt earth-moon-vr einen bleibenden Eindruck hinterlassenden Beitrag zur VR-Community. Obwohl es sich nicht um eine echte Nachbildung des Erde-Mond-Systems handelt, wurde earth-moon-vr mit React VR gebaut und verwendet das Konzept des Cubemapping (eine Methode des Environmental Mappings, die die sechs Flächen eines Würfels als Mapform verwendet), um 3D-Modelle von Erde und Mond zu rendern. Herrera schrieb auch einen hilfreichen Artikel, in dem er ausführlich die Konzepte der 3D-Modellierung sowie die Enstehung dieses Projekts von Grund auf erklärt. Für einen detaillierten Rundgang durch Earth-Moon-vr sowie einen Überblick über die interaktive Demo können Sie sich Herreras Artikel sowie das Earth Moon-vr-Projekt auf GitHub ansehen.
React VR Player.
Der React-VR-Player wurde von Antoine Jaussoin entwickelt und ist ein 360-Grad-Videoplayer, der als React-Komponente erweitert wurde. Es wurde vom eleVR-Player übernommen, einem Web-Player für 360-Grad Videos, der mit JavaScript und WebGL geschrieben wurde. Der React-VR-Player arbeitet mit nativer Browserunterstützung von Firefox Nightly and Chromium. Im Player angezeigte Videos können über die Tastatursteuerung gedreht werden. Zuschauer können auch ein VR-Headset wie Oculus Rift verwenden, wenn sie einen experimentellen WebVR-Browser verwenden. Der React-VR-Player hat bestimmte Sicherheitseinschränkungen, so dass nur Videos aus derselben Domain funktionieren. Aufgrund von WebGL-Beschränkungen können Nutzer kein Video aus einer anderen Domain als der URL des React-VR-Players verwenden:
Antoine fördert Beiträge zu seinem Videoplayer und hat Pläne, die Features des React-VR-Players weitgehend mit denen des eleVR zu vereinbaren. Es ist auch geplant, sogenannte Add Control Helper hinzuzufügen, wenn das Video nicht gestartet wird, und Support für verschiedene Videokapitel hinzuzufügen. Sie können den Quellcode von React-VR-Player auf GitHub ausprobieren und Beiträge leisten. Sie können sich auch die Demo von React-VR-Player hier ansehen:
React VR GraphQL.
React-VR-GraphQL wurde von Scaphold erstellt, einem StartUp, das GraphQL Backend als Service anbietet. Es ist im Grunde genommen ein Starterkit zur Erstellung von VR-Anwendungen mit React Native und GraphQL. Das Projekt wird mit einer öffentlich zugänglichen GraphQL-API geliefert, die auf der Website von Scaphold gehostet wird. Mit React-VR-GraphQL können Sie Nachrichten auf GraphQL, einer In-Browser-IDE zum Erkunden von GraphiQL, aktualisieren und diese Nachrichten in Echtzeit auf Ihrer VR-App anzeigen. Nachdem Sie Ihre VR-App erstellt haben, müssen Sie nur nich GraphiQL und Ihre VR-App Seite an Seite in zwei Browserfenstern öffnen und beobachten, wie Nachrichten, die Sie mit GraphiQL erstellen, automatisch in Ihrer VR-App aktualisiert werden. Aufgrund der Leistungsfähigkeit von GraphQL können Sie mit der Erstellung von rasant schnellen Projekten wie VR-Spielen beginnen.
Sie können dazu beitragen, sich von React-VR-GraphQL inspirieren zu lassen und sogar etwas Eigenes daraus zu machen, indem Sie den Repo klonen.
Schlußfolgerungen.
Das sind aus unserer Sicht die aktuell 6 besten React VR-Projekte. Auch wenn es bis dato nur wenige Monate alt ist, hat React VR definitiv das Interesse der Entwicklergemeinde geweckt. Es enstehen viele offene Projekte, die Innovation und gemeinsame Zusammenarbeit fördern. Man kann sagen, dass die Zukunft der VR im derzeitigen Tempo von React VR viel für uns bereithält.
Vielen Dank für Ihren Besuch.