Beginnen Sie mit React360 und WebXR!

Beginnen Sie mit React360 und WebXR!

Sind Sie daran interessiert, in die einzutauchen? Sind Sie ein Programmierer, der erkunden möchte, was zu bieten hat? Dann ist diese Installations- 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!

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 und 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 große Fortschritte gemacht und ist jetzt einfacher denn je, in das Thema einzutauchen. Worauf warten Sie also noch?

Verwandeln Sie Ihren Commerce mit AR und 3D-Produktvisualisierung!

Bei uns geht es um Techniken, die es schaffen, das Produkt zum Erlebnis zu machen. Virtual & Augmented Reality, 360 Grad-Videos, Darstellungen in 3D, virtuelle Showrooms. Die Besucher:innen sollen eintauchen in die Welt des Unternehmens mit immersiven Technologien.
Charakterdesign / Maskottchen

Sie können uns mit der Erstellung von individuellen 3D-Visualisierungen beauftragen. Jeder kann 3D-Visualisierungen bei unserem Kreativservice bestellen – unabhängig davon, ob Sie nur ein einzelnes 3D-Modell benötigen oder viele.

Installation: React360

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

Dieses 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:

Beginnen Sie mit React360 und WebXR!

Polyfill

Polyfill ist eine JavaScript-Implementierung der -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

Installation: React360

View in VR

React360

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.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

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.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert