Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cvan/aframe-firebase-component
Firebase component for multiuser A-Frame.
https://github.com/cvan/aframe-firebase-component
Last synced: 2 months ago
JSON representation
Firebase component for multiuser A-Frame.
- Host: GitHub
- URL: https://github.com/cvan/aframe-firebase-component
- Owner: cvan
- License: mit
- Created: 2016-05-26T00:50:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-05-25T04:06:17.000Z (over 8 years ago)
- Last Synced: 2024-12-09T14:58:06.708Z (2 months ago)
- Language: JavaScript
- Homepage: https://ngokevin.github.io/aframe-firebase-component
- Size: 4.68 MB
- Stars: 3
- Watchers: 2
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## aframe-firebase-component
> Learn [how to get started with Firebase](https://firebase.google.com/docs/web/setup).
A Firebase component for [A-Frame](https://aframe.io).
Comes with a Firebase broadcast component for multiuser experiences
out-of-the-box by syncing entities' component data to Firebase realtime
database. The parent-child relationships between entities are maintained as
well as long as all entities in the hierarchy have the `broadcast` component
attached.
To deploy with GitHub pages when setting up Firebase with the [Firebase
Console](https://firebase.google.com/console/), go into *Auth*, and add your
GitHub pages domain (e.g., `ngokevin.github.io`). This will whitelist your
domain.
If you want to allow unauthenticated users (most should), then go into
*Database*, click on *Rules*, and set both the `.read` and `.write` to `true`.
### Properties
#### firebase
Firebase configuration component for ``. Firebase will provide all of
this for you when you set up a Firebase app.
| Property | Description |
| -------- | ----------- |
| apiKey | API key for Firebase. |
| authDomain | Firebase authentication domain. |
| databaseURL | Firebase database URL. |
| storageBucket | Firebase storage bucket URL. |
#### firebase-broadcast
Broadcast component data to be synced across all clients using Firebase realtime database.
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| components | List of comma-delimited component names to broadcast | position, rotation |
### Accessing the Firebase Object
You can access the Firebase object:
```js
document.querySelector('a-scene').systems.firebase.firebase
```
If you wanted to add game logic or features such as chat.
### Usage
#### Browser Installation
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### NPM Installation
Install via NPM:
```bash
npm install aframe-firebase-component
```
Then register and use.
```js
require('aframe');
require('aframe-firebase-component');
```
#### FAQ
*Why can't I see anyone else?*
Try positioning everyone at a different start point. In
`examples/presentation/components/`, there is a `random-position-at` component
that starts everyone at a different position (more specifically at one of the
chairs).