aframe sharedspace component

componente de space aframe

Componente VR de frame A-Frame para crear experiencias de usuarios múltiples con WEBRTC

¡Prueba el chat VR en línea!

El componente sharedspace proporciona un modelo de participación simple en el que los participantes se unen o abandonan una habitación con nombre, envían mensajes a otros pares y publican transmisiones de audio. Se ejecuta en la parte superior de WEBRTC, con un mínimo de infraestructura de señalización en la gestión de la sesión de igual a igual.

El componente sharedspace cubre un USECase específico. Si está buscando una solución más general para escenas de cuadros A sincronizadas por la red, eche un vistazo a networked-aframe de Hayden Lee.

Https

WebRTC trabaja solo con orígenes seguros, por lo que su sitio debe ser servido desde localhost o https para que el componente funcione. Si necesita acceder a su aplicación desde Internet, use NGROK o cree completamente en Glitch. Ambas opciones funcionan muy bien.

Instalar

Necesitará node y npm instalados en su sistema. Una vez instalado, simplemente ejecute el siguiente comando desde la raíz de su proyecto para instalar como dependencia:

$ npm install --save aframe-sharedspace-component

O agregue la etiqueta de script al componente después de incluir el marco A:

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

Configuración mínima

Una vez que se instalan el componente A-Frame y sharedspace , este es todo el HTML que necesita para crear una sala de chat (¡realmente!):

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

Desafortunadamente, la sala de chat carece de la decoración y los avatares serán esferas, lo que no es la mejor manera de representar una cabeza humana. En su lugar, eche un vistazo a la aplicación de chat de VR en Glitch para una configuración mínima funcional .

Documentación

Al instalar sharedspace , cuatro componentes se registran con A-Frame:

Componente	Descripción
sharedspace	Proporciona el modelo de participación.
avatars	Gestionar los avatares de los participantes.
share	Controla el estado del participante para compartir.
position-around	Ayudante para colocar una entidad alrededor de un punto central.

Eche un vistazo al documento de descripción general del componente mientras prepara una versión más webby de los documentos.

Que contribuye

Si desea contribuir al proyecto, clone el repositorio e instale las dependencias:

$ npm install

Emitir el siguiente comando para ejecutar un servidor local con la escucha en vivo en el puerto 8080 y un servidor de señalización WEBRTC local en el puerto 9000 :

$ npm start

Para hacer el componente sharedspace para usar el servidor de señalización local, use la propiedad provider :

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

Construir

Si desea generar el paquete JavaScript para la biblioteca, ejecute el siguiente comando y el paquete estará debajo de la carpeta dist :

$ npm run build

Análisis de tamaño

Puede establecer la variable de entorno SIZE_ANALYSIS para visualizar el tamaño de los componentes del paquete.

$ SIZE_ANALYSIS=1 npm run build

Desplegar

Para implementar la demostración que viene con la biblioteca en las páginas de GitHub, use el siguiente comando. Recuerde para cambiar el control remoto origin para señalar a su propio repositorio.

$ npm run deploy

Créditos

Modelo de combinación de anime medias por medias tiene licencia bajo atribución CC