aframe sharedspace component

Komponen Aframe-Sharedspace

Komponen A-Frame VR untuk membuat pengalaman multi-pengguna dengan WEBRTC

Coba obrolan VR secara online!

Komponen sharedspace menyediakan model partisipasi sederhana di mana peserta bergabung atau meninggalkan ruang bernama, mengirim pesan ke rekan lain dan menerbitkan aliran audio. Ini berjalan di atas WEBRTC, dengan infrastruktur pensinyalan minimal menyampaikan pada manajemen sesi peer-to-peer.

Komponen sharedspace mencakup usecase spesifik. Jika Anda mencari solusi yang lebih umum untuk adegan A-frame yang disinkronkan jaringan, lihatlah networked-aframe oleh Hayden Lee.

Https

WebRTC hanya bekerja dengan asal -usul yang aman, sehingga situs Anda harus dilayani dari localhost atau HTTP untuk komponen untuk bekerja. Jika Anda perlu mengakses aplikasi Anda dari internet, gunakan NGROK atau membangunnya sepenuhnya pada kesalahan. Kedua opsi bekerja dengan baik.

Memasang

Anda akan memerlukan node dan npm yang diinstal di sistem Anda. Setelah diinstal, cukup jalankan perintah berikut dari root proyek Anda untuk menginstal sebagai ketergantungan:

$ npm install --save aframe-sharedspace-component

Atau tambahkan tag skrip ke komponen setelah termasuk A-frame:

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

Pengaturan minimal

Setelah A-frame dan komponen sharedspace diinstal, ini semua HTML yang Anda butuhkan untuk membuat ruang obrolan (sungguh!):

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

Sayangnya, ruang obrolan kurang dari dekorasi dan avatar adalah bola, yang bukan cara terbaik untuk mewakili kepala manusia. Sebagai gantinya, lihat aplikasi Obrolan VR pada Glitch untuk pengaturan minimal fungsional .

Dokumentasi

Saat menginstal sharedspace , empat komponen terdaftar dengan A-Frame:

Komponen	Keterangan
sharedspace	Memberikan model partisipasi.
avatars	Kelola avatar peserta.
share	Mengontrol keadaan peserta untuk dibagikan.
position-around	Penolong untuk memposisikan suatu entitas di sekitar titik pusat.

Lihatlah dokumen ikhtisar komponen sambil menyiapkan versi Webby yang lebih banyak dari dokumen.

Berkontribusi

Jika Anda ingin berkontribusi pada proyek, klon repositori dan instal dependensi:

$ npm install

Keluarkan perintah berikut untuk menjalankan server lokal dengan pendengaran langsung di port 8080 dan server pensinyalan WebRTC lokal di port 9000 :

$ npm start

Untuk membuat komponen sharedspace untuk menggunakan server pensinyalan lokal, gunakan properti provider :

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

Membangun

Jika Anda ingin menghasilkan bundel JavaScript untuk perpustakaan, jalankan perintah berikut dan paket akan berada di bawah folder dist :

$ npm run build

Analisis ukuran

Anda dapat mengatur variabel lingkungan SIZE_ANALYSIS untuk memvisualisasikan ukuran komponen bundel.

$ SIZE_ANALYSIS=1 npm run build

Menyebarkan

Untuk menggunakan demo yang datang dengan perpustakaan di halaman GitHub, gunakan perintah berikut. Ingatlah untuk mengubah remote origin untuk menunjuk ke repositori Anda sendiri.

$ npm run deploy

Kredit

Stocking model wajah anime dengan stocking dilisensikan di bawah atribusi CC