aframe sharedspace component

AFRAME-SHAREDSPACE-Component

VR-компонент A-Frame для создания многопользовательского опыта с WEBRTC

Попробуйте VR чат в Интернете!

Компонент sharedspace предоставляет простую модель участия, в которой участники присоединяются или оставляют именованную комнату, отправляют сообщения другим коллегам и публикуют аудио -потоки. Он работает на вершине WEBRTC, с минимальной передачей сигнальной инфраструктуры на управлении одноранговым сеансом.

Компонент sharedspace охватывает конкретную использование. Если вы ищете более общее решение для сетевых сцен A-Frame, посмотрите на networked-aframe Хейдена Ли.

Https

WEBRTC работает только с безопасным происхождением, поэтому ваш сайт должен быть обслуживаться от localhost или HTTPS для работы компонента. Если вам нужно получить доступ к вашему приложению из Интернета, используйте NGROK или постройте его полностью на глюке. Оба варианта работают отлично.

Установить

Вам понадобятся node и npm , установленные в вашей системе. После установки просто запустите следующую команду из корня вашего проекта, чтобы установить в качестве зависимости:

$ npm install --save aframe-sharedspace-component

Или добавить тег сценария в компонент после включения A-Frame:

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

Минимальная настройка

Как только A-Frame и компонент sharedspace установлены, это все, что вам нужно для создания чата (правда!):

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

К сожалению, в чате не хватает украшения, и аватары будут сферами, что не является лучшим способом представления человеческой головы. Вместо этого взгляните на приложение VR Chat на Glitch для функциональной минимальной настройки.

Документация

При установке sharedspace четыре компонента зарегистрированы в A-Frame:

Компонент	Описание
sharedspace	Предоставляет модель участия.
avatars	Управлять аватарами участников.
share	Контролирует состояние участника, чтобы поделиться.
position-around	Помощник, чтобы позиционировать сущность вокруг центральной точки.

Взгляните на документ обзора компонентов, приготовя более веб -версию документов.

Внося

Если вы хотите внести свой вклад в проект, клонируйте репозиторий и установите зависимости:

$ npm install

Выполните следующую команду для запуска локального сервера с помощью прослушивания в прямом эфире на порте 8080 и локального сервера сигнализации WEBRTC на порту 9000 :

$ npm start

Чтобы сделать компонент sharedspace для использования локального сервера сигналов, используйте свойство provider :

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

Строить

Если вы хотите сгенерировать пакет JavaScript для библиотеки, запустите следующую команду, и пакет будет под папкой dist :

$ npm run build

Анализ размера

Вы можете установить переменную среды SIZE_ANALYSIS , чтобы визуализировать размер компонентов пучка.

$ SIZE_ANALYSIS=1 npm run build

Развертывать

Чтобы развернуть демонстрацию с библиотекой на страницах GitHub, используйте следующую команду. Запомните, чтобы изменить отдаленное origin , чтобы указать на ваш собственный репозиторий.

$ npm run deploy

Кредиты

Аниме -лицевая модель, чулок, хранение лицензирована в соответствии с атрибуцией CC