aframe sharedspace component

Aframe-sharedspace-Component

Componente VR da estrutura A para criar experiências multiusuário com o WebRTC

Experimente o bate-papo em VR on-line!

O componente sharedspace fornece um modelo de participação simples no qual os participantes ingressam ou deixam uma sala nomeada, enviam mensagens para outros colegas e publicam fluxos de áudio. Ele é executado no topo do WebRTC, com o mínimo de retransmissão de infraestrutura de sinalização no gerenciamento de sessões ponto a ponto.

O componente sharedspace abrange uma USECASE específica. Se você está procurando uma solução mais geral para cenas de estrutura A-Sincronizadas em rede, dê uma olhada no networked-aframe de Hayden Lee.

Https

O WebRTC trabalha apenas com origens seguras, para que seu site seja servido a partir de localhost ou HTTPS para o componente funcionar. Se você precisar acessar seu aplicativo na Internet, use o NGrok ou crie -o completamente em falha. Ambas as opções funcionam muito bem.

Instalar

Você precisará node e npm instalados em seu sistema. Depois de instalado, basta executar o seguinte comando da raiz do seu projeto para instalar como uma dependência:

$ npm install --save aframe-sharedspace-component

Ou adicione a tag de script ao componente após a inclusão de a estrutura A:

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

Configuração mínima

Depois que a estrutura A e o componente sharedspace estiverem instalados, este é todo o HTML que você precisa para criar uma sala de bate-papo (realmente!):

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

Infelizmente, a sala de bate -papo carece da decoração e os avatares serão esferas, o que não é a melhor maneira de representar uma cabeça humana. Em vez disso, dê uma olhada no aplicativo de bate -papo em VR na falha para obter uma configuração mínima funcional .

Documentação

Ao instalar sharedspace , quatro componentes são registrados com a estrutura A:

Componente	Descrição
sharedspace	Fornece o modelo de participação.
avatars	Gerencie os avatares dos participantes.
share	Controla o estado do participante para compartilhar.
position-around	Ajudante para posicionar uma entidade em torno de um ponto central.

Dê uma olhada no documento de visão geral do componente enquanto prepara uma versão mais webby dos documentos.

Contribuindo

Se você deseja contribuir com o projeto, clone o repositório e instale as dependências:

$ npm install

Emita o comando a seguir para executar um servidor local com a audição ao vivo na porta 8080 e um servidor de sinalização WebRTC local na porta 9000 :

$ npm start

Para fazer com que o componente sharedspace para usar o servidor de sinalização local, use a propriedade provider :

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

Construir

Se você deseja gerar o pacote JavaScript para a biblioteca, execute o seguinte comando e o pacote estará sob a pasta dist :

$ npm run build

Análise de tamanho

Você pode definir a variável SIZE_ANALYSIS Environment para visualizar o tamanho dos componentes do pacote.

$ SIZE_ANALYSIS=1 npm run build

Implantar

Para implantar a demonstração que vem com a biblioteca nas páginas do GitHub, use o seguinte comando. Lembre -se de alterar a origin remota para apontar para o seu próprio repositório.

$ npm run deploy

Créditos

O modelo de moda de face de anime estocando por estoque é licenciado sob atribuição de CC