aframe sharedspace component

Aframe-SharkedSpace المكون

مكون A-Frame VR لإنشاء تجارب متعددة المستخدمين مع WebRTC

جرب دردشة الواقع الافتراضي على الإنترنت!

يوفر مكون sharedspace نموذج مشاركة بسيط ينضم فيه المشاركون إلى غرفة محددة أو تركها ، وإرسال رسائل إلى أقرانهم الآخرين ونشر تدفقات الصوت. إنه يعمل في الجزء العلوي من WebRTC ، مع الحد الأدنى من البنية التحتية للإشارة إلى إدارة جلسة نظير إلى نظير.

يغطي مكون sharedspace مقوسًا محددًا. إذا كنت تبحث عن حل أكثر عمومية لمشاهد إطار A-Farmized الشبكة ، فقم بإلقاء نظرة على networked-aframe التي كتبها Hayden Lee.

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 ، هذا هو كل HTML الذي تحتاجه لإنشاء غرفة دردشة (حقًا!):

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

لسوء الحظ ، تفتقر غرفة الدردشة من الديكور وستكون الصور الرمزية مجالات ، وهي ليست أفضل طريقة لتمثيل رأس الإنسان. بدلاً من ذلك ، ألقِ نظرة على تطبيق دردشة VR على خلل لإعداد الحد الأدنى الوظيفي .

الوثائق

عند تثبيت 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