Beginnen Sie mit React360 und WebXR!

1. Dezember 2020 Ralf Dreiundzwanzig WebXR, Open Source Schlagwörter: Web VR, WebXR 0 Kommentare

Sind Sie daran interessiert, in die virtuelle Realität einzutauchen? Sind Sie ein Programmierer, der erkunden möchte, was WebXR zu bieten hat? Dann ist diese Installations-Anleitung genau das Richtige für Sie.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels "Beginnen Sie mit React360 und WebXR!" schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Download PDF

Was ist React360?

React 360 ist ein Framework für die Erstellung von interaktiven 360-Erlebnissen, die in Ihrem Webbrowser laufen. Es verbindet moderne APIs wie WebGL und WebXR mit der deklarativen Kraft von React und erzeugt Anwendungen, die über eine Vielzahl von Geräten erlebt werden können. Durch die Nutzung von Web-Technologien und des bestehenden React-Ökosystems zielt React 360 darauf ab, die Erstellung plattformübergreifender 360-Erlebnisse zu vereinfachen.

Jetzt ist ein guter Zeitpunkt, um in diese Technologie einzutauchen und mit großartigen Ideen zu experimentieren. Mit der weiteren Entwicklung der virtuellen Realität wird dieses Technologiefeld zahlreiche Industrien durcheinander bringen. Darüber hinaus hat WebXR große Fortschritte gemacht und ist jetzt einfacher denn je, in das Thema einzutauchen. Worauf warten Sie also noch?

Installation: React360

Dieser Artikel erfordert mehr Erfahrung im Umgang mit JavaScript und ist daher nur für fortgeschrittene Benutzer gedacht.

V/AR Modelle bereit für Metaverse

Sparen Sie Entwicklungszeit und -kosten, machen Sie Prototypenerfahrungen oder verwenden Sie unsere 3D-Modelle in Ihrem V/AR Projekt.

Der neue Trend nennt sich VR-Commcere. Mit dem Browser in die erweiterte Realität, ohne App. Wir haben es umgesetzt.

V/AR-Commcere

Dieses Tutorial ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe. Diese werden in einer Vielzahl von anderen Dokumenten im Internet behandelt.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige um ein solches System aufzusetzen, es ist lediglich, der, den ich bevorzuge.

Zuerst Node.js

Node.js ist eine plattformübergreifende Open-Source-JavaScript-Laufzeitumgebung, die JavaScript-Code außerhalb eines Webbrowsers ausführen kann. Node.js wird in der JavaScript-Laufzeitumgebung V8 ausgeführt und bietet eine ressourcensparende Architektur, die eine besonders große Anzahl gleichzeitig bestehender Netzwerkverbindungen ermöglicht.

Link Node.js

https://nodejs.org/en/

Bevor Sie loslegen können, müssen Sie Node.js installieren. Während React 360 in Ihrem Webbrowser läuft, hängt die Build, die Ihren Code bündelt, von Node.js ab.

Nach der Installation von Node.js können Sie die React 360 CLI abrufen, ein Tool, mit dem Sie Ihre React 360-Projekte erstellen und verwalten können. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus.

npm install -g react-360-cli

Damit wird die neueste Version der CLI geholt und auf Ihrem System installiert. Nach der Installation können wir damit den ersten Code für unser erstes Projekt generieren. Beginnen Sie, indem Sie zu einem Verzeichnis navigieren, in dem Sie Ihr neues Projekt ablegen möchten, und führen Sie den Befehl aus, um ein neues Projekt mit dem Namen HalloVR zu erstellen.

react-360 init HalloVR

Dadurch wird ein neues Verzeichnis namens HalloVR erstellt, das alle Dateien enthält, die zur Ausführung Ihres Projekts erforderlich sind. Geben Sie das Verzeichnis ein, um sie anzuzeigen.

cd HalloVR

Wenn wir React 360-Anwendungen erstellen, haben wir eine Reihe von Quellcode- und Bibliotheksdateien, die in einer einzigen Datei gebündelt werden müssen, damit ein Webbrowser sie laden kann.

React 360 wird mit seinen eigenen Tools ausgeliefert.

Während der Entwicklung läuft auf dem Bundler ein lokaler Server, über den Sie auf Ihr Projekt zugreifen können. Er stellt die Dateien für Ihr Projekt bereit und führt auf Anfrage alle notwendigen Kompilierungen oder Verarbeitungen durch. Wenn Sie bereit sind, Ihr Projekt zu veröffentlichen, können Sie den Bundler anweisen, Produktionsversionen dieser Dateien zu erstellen, so dass Sie sie auf einem beliebigen Webserver platzieren können. Für den Moment starten Sie den Entwicklungsserver mit dem folgenden Befehl.

npm start

Der Server prüft Ihr Projekt und sammelt alle Daten, die er für die Bereitstellung Ihrer JavaScript-Dateien benötigt.

Um Ihr Projekt zu sehen, öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost:8081/index.html.

Beim ersten Starten dauert es einige Zeit. Nach dem ersten Laden sind aufeinanderfolgende Ladevorgänge viel schneller, auch wenn Sie Ihren Code ändern. Sobald die Anwendung geladen ist, sollten Sie so den 3D Raum in Ihrem Browser sehen:

WebVR Polyfill

WebVR Polyfill ist eine JavaScript-Implementierung der WebXR-Spezifikation. Dieses Projekt stellt sicher, dass Ihre WebXR-Inhalte auf jeder Plattform funktionieren, unabhängig davon, ob der Browser/das Gerät native WebXR-Unterstützung hat oder nicht, oder wenn es Inkonsistenzen in der Implementierung gibt.

$ npm install --save webvr-polyfill

In Ihrem HalloVR Verzeichnis öffnen Sie nun die client.js und fügen folgenden Code ein:

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

Ihre client.js sollte jetzt so aussehen:

// This file contains the boilerplate to execute your React app.
// If you want to modify your application's content, start in "index.js"

import {ReactInstance} from 'react-360-web';
import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('HelloWorld2', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
}

window.React360 = {init};

Screenshot

View in VR

Links:

https://facebook.github.io/react-360/

Wie geht es weiter?

Ich werde in den nächsten Wochen Demo Anwendungen gestalten, und werde diese hier im r23:Blog Ihnen zeigen.

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR - wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.