aframe sharedspace component

composant d'espace-partage aframe

Composant VR A-Frame pour créer des expériences multi-utilisateurs avec WebBrTC

Essayez le chat VR en ligne!

Le composant sharedspace fournit un modèle de participation simple dans lequel les participants rejoignent ou quittent une salle nommée, envoient des messages à d'autres pairs et publient des flux audio. Il fonctionne au sommet de WebBrTC, avec un minimum d'infrastructure de signalisation relayant la gestion de session entre pairs.

Le composant sharedspace couvre une USecase spécifique. Si vous recherchez une solution plus générale pour les scènes de trame A synchronisées en réseau, jetez un œil à networked-aframe par Hayden Lee.

Https

WeBrTC fonctionne uniquement avec des origines sécurisées, de sorte que votre site doit être servi à partir de localhost ou HTTPS pour que le composant fonctionne. Si vous devez accéder à votre application depuis Internet, utilisez Ngrok ou construisez-le complètement sur Glitch. Les deux options fonctionnent très bien.

Installer

Vous aurez besoin node et npm installés dans votre système. Une fois installé, exécutez simplement la commande suivante à partir de la racine de votre projet à installer comme dépendance:

$ npm install --save aframe-sharedspace-component

Ou ajoutez la balise de script au composant après avoir inclus un trame A:

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

Configuration minimale

Une fois A-Frame et le composant sharedspace installé, c'est tout le HTML dont vous avez besoin pour créer une salle de discussion (vraiment!):

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

Malheureusement, la salle de discussion manque de décoration et les avatars seront des sphères, ce qui n'est pas le meilleur moyen de représenter une tête humaine. Au lieu de cela, jetez un œil à l'application VR Chat sur Glitch pour une configuration minimale fonctionnelle .

Documentation

Lors de l'installation sharedspace , quatre composants sont enregistrés avec A-Frame:

Composant	Description
sharedspace	Fournit le modèle de participation.
avatars	Gérer les avatars des participants.
share	Contrôle l'état du participant à partager.
position-around	Aide pour positionner une entité autour d'un point central.

Jetez un œil au document de vue d'ensemble des composants lors de la préparation d'une version plus Web des documents.

Contributif

Si vous souhaitez contribuer au projet, clonez le référentiel et installez les dépendances:

$ npm install

Émettez la commande suivante pour exécuter un serveur local avec une écoute de recharge en direct au port 8080 et un serveur de signalisation Webrtc local au port 9000 :

$ npm start

Pour faire du composant sharedspace pour utiliser le serveur de signalisation local, utilisez la propriété provider :

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

Construire

Si vous souhaitez générer le bundle JavaScript pour la bibliothèque, exécutez la commande suivante et le package sera sous le dossier dist :

$ npm run build

Analyse des tailles

Vous pouvez définir la variable d'environnement SIZE_ANALYSIS pour visualiser la taille des composants du bundle.

$ SIZE_ANALYSIS=1 npm run build

Déployer

Pour déployer la démo à venir avec la bibliothèque sur les pages GitHub, utilisez la commande suivante. Remeber pour modifier la télécommande origin pour pointer vers votre propre référentiel.

$ npm run deploy

Crédits

Le stockage du modèle de visage anime par stockage est sous licence dans l'attribution CC