aframe sharedspace component

Aframe-SharedSpace-Komponenten

A-Frame VR-Komponente, um Multi-Benutzer-Erlebnisse mit Webrtc zu erstellen

Probieren Sie den VR-Chat online aus!

Die sharedspace -Komponente bietet ein einfaches Teilnahmemodell, bei dem die Teilnehmer einen benannten Raum beitreten oder hinterlassen, Nachrichten an andere Kollegen senden und Audio -Streams veröffentlichen. Es läuft auf WEBRTC, wobei die minimale Signalinfrastruktur beim Peer-to-Peer-Sitzungsmanagement weiterleitet.

Die sharedspace -Komponente deckt eine bestimmte USECase ab. Wenn Sie nach einer allgemeineren Lösung für netzwerksynchronisierte A-Frame-Szenen suchen, sehen Sie sich den networked-aframe von Hayden Lee an.

Https

WEBRTC arbeitet nur mit sicheren Ursprünge zusammen, sodass Ihre Website von localhost oder HTTPS serviert werden muss, damit die Komponente funktioniert. Wenn Sie über das Internet auf Ihre Anwendung zugreifen müssen, verwenden Sie NGROK oder erstellen Sie sie vollständig auf Panne. Beide Optionen funktionieren großartig.

Installieren

In Ihrem System benötigen Sie node und npm . Führen Sie nach der Installation einfach den folgenden Befehl vom Stamm Ihres Projekts aus, um als Abhängigkeit zu installieren:

$ npm install --save aframe-sharedspace-component

Oder fügen Sie das Skript-Tag der Komponente hinzu, nachdem Sie A-Rahmen einbezogen haben:

 < script src =" https://unpkg.com/[email protected]/dist/aframe-sharedspace-component.min.js " > </ script > 

Minimales Setup

Sobald A-Frame und die sharedspace Komponente installiert sind, ist dies alles HTML, das Sie für eine Chatroom (wirklich!) Erstellen müssen:

 < a-scene >
  < a-entity sharedspace =" audio: true " avatars >
  </ a-entity >
</ a-scene >
< template >
  < a-sphere radius =" 0.1 " > </ a-sphere >
</ template >

Leider fehlt der Chatroom aus Dekoration und Avatare werden Kugeln sein, was nicht der beste Weg ist, einen menschlichen Kopf zu repräsentieren. Schauen Sie sich stattdessen die VR -Chat -Anwendung in Sturm an, um ein funktionales minimales Setup zu erhalten.

Dokumentation

Bei der Installation sharedspace sind vier Komponenten mit A-Frame registriert:

Komponente	Beschreibung
sharedspace	Bietet das Teilnahmemodell.
avatars	Verwalten Sie die Avatare der Teilnehmer.
share	Kontrolliert den Zustand des Teilnehmers zu teilen.
position-around	Helfer, um eine Einheit um einen zentralen Punkt zu positionieren.

Schauen Sie sich das Komponentenübersichtsdokument an, während Sie eine mehr Webby -Version der Dokumente vorbereiten.

Beitragen

Wenn Sie zum Projekt beitragen möchten, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

$ npm install

Geben Sie den folgenden Befehl aus, um einen lokalen Server mit Live-Reload-Hören unter Port 8080 und einem lokalen WEBRTC-Signalisierungsserver unter Port 9000 auszuführen:

$ npm start

Verwenden Sie die provider -Eigenschaft, um die sharedspace -Komponente für die Verwendung des lokalen Signalisierungsservers zur Verwendung des lokalen Signalisierungsservers zu machen:

 < a-entity sharedspace =" provider: http://localhost:9000 " >
  <!-- Here is the content of your shared space -->
</ a-entity > 

Bauen

Wenn Sie das JavaScript -Bundle für die Bibliothek generieren möchten, führen Sie den folgenden Befehl aus und das Paket befindet sich unter dem Ordner dist :

$ npm run build

Größenanalyse

Sie können die Variable SIZE_ANALYSIS -Umgebung festlegen, um die Größe der Bündelkomponenten zu visualisieren.

$ SIZE_ANALYSIS=1 npm run build

Einsetzen

Verwenden Sie den folgenden Befehl, um die mit der Bibliothek auf den Github -Seiten vorliegende Demo bereitzustellen. Erinnern Sie sich daran, die Entfernung der origin zu ändern, um auf Ihr eigenes Repository zu verweisen.

$ npm run deploy

Credits

Der Strumpf des Anime -Gesichtsmodells durch Strumpf ist unter CC -Zuschreibung lizenziert