aframe sharedspace component

Aframe-SharedSpace-Component

AフレームVRコンポーネントWEBRTCでマルチユーザーエクスペリエンスを作成します

オンラインでVRチャットを試してください！

sharedspaceコンポーネントは、参加者が指定された部屋に参加または残し、他のピアにメッセージを送信してオーディオストリームを公開する簡単な参加モデルを提供します。 WebrTCの上部で実行され、ピアツーピアセッション管理における最小限のシグナルインフラストラクチャが中継されます。

sharedspaceコンポーネントは、特定のユーザーカバーをカバーします。ネットワーク同期Aフレームシーンのより一般的なソリューションを探している場合は、Hayden Leeによるnetworked-aframeをご覧ください。

https

WeBRTCはSecure Originsのみで動作するため、コンポーネントが機能するためには、 localhostまたはHTTPSからサイトを提供する必要があります。インターネットからアプリケーションにアクセスする必要がある場合は、ngrokを使用するか、グリッチで完全に構築してください。両方のオプションはうまく機能します。

インストール

システムにnodeとnpmがインストールされる必要があります。インストールしたら、プロジェクトのルートから次のコマンドを実行して、依存関係としてインストールします。

$ npm install --save aframe-sharedspace-component

または、aフレームを含めた後、スクリプトタグをコンポーネントに追加します。

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

最小限のセットアップ

Aフレームとsharedspaceコンポーネントがインストールされると、これはチャットルームを作成するために必要なすべてのHTMLです（本当に！）：

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

残念ながら、チャットルームには装飾が不足しており、アバターは球体になりますが、これは人間の頭を表す最良の方法ではありません。代わりに、機能的な最小セットアップについては、GlitchのVRチャットアプリケーションをご覧ください。

ドキュメント

sharedspaceをインストールすると、4つのコンポーネントがAフレームに登録されています。

成分	説明
sharedspace	参加モデルを提供します。
avatars	参加者のアバターを管理します。
share	共有する参加者の状態を制御します。
position-around	エンティティを中心点の周りに配置するヘルパー。

よりウェブビーバージョンのドキュメントを準備しながら、コンポーネントの概要ドキュメントをご覧ください。

貢献

プロジェクトに貢献したい場合は、リポジトリをクローンして依存関係をインストールします。

$ npm install

次のコマンドを発行して、ポート8080でライブリロードリスニングを使用してローカルサーバーを実行し、ポート9000でローカルWEBRTCシグナリングサーバーを実行します。

$ 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 Remoteを変更して、自分のリポジトリを指すように覚えておいてください。

$ npm run deploy

クレジット

ストッキングによるアニメフェイスモデルストッキングは、CCの帰属の下でライセンスされています