aframe sharedspace component

องค์ประกอบของ Spharepace

องค์ประกอบ A-Frame VR เพื่อสร้างประสบการณ์ผู้ใช้หลายคนด้วย WEBRTC

ลองแชท VR ออนไลน์!

ส่วนประกอบ sharedspace ให้รูปแบบการมีส่วนร่วมอย่างง่ายที่ผู้เข้าร่วมเข้าร่วมหรือออกจากห้องที่มีชื่อส่งข้อความไปยังเพื่อนคนอื่น ๆ และเผยแพร่สตรีมเสียง มันทำงานที่ด้านบนของ WEBRTC โดยมีโครงสร้างพื้นฐานการส่งสัญญาณน้อยที่สุดในการจัดการเซสชันแบบเพียร์ทูเพียร์

ส่วนประกอบ sharedspace ครอบคลุม USECASE ที่เฉพาะเจาะจง หากคุณกำลังมองหาวิธีแก้ปัญหาทั่วไปสำหรับฉาก A-Frame ที่ซิงโครไนซ์เครือข่ายลองดูที่ 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 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