aframe-firebase-component

aframe-firebase-component

> Learn how to get started with Firebase.

A Firebase component for A-Frame.


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, 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.

$3

#### firebase

Firebase configuration component for . The apiKey, authDomain,
databaseURL, and storageBucket are provided by Firebase (go to the Firebase
console for your app and click on "Add Firebase to your web app").

The optional channel name allows multiple A-Frame apps, or multiple
instances/rooms of the same app, to share one Firebase bucket. If no channel is
given, 'default' is used. The channel name can also be specified in the URL:
mysite.com?aframe-firebase-channel=oahu

The optional interval sets how often (in milliseconds) data is sent to Firebase.
Default interval is 10 milliseconds.

| Property | Description | Required
| -------- | ----------- | --------
| apiKey | API key for Firebase. | yes
| authDomain | Firebase authentication domain. | yes
| channel | Name of room/namespace. | no
| databaseURL | Firebase database URL. | yes
| interval | Milliseconds between broadcasts.| no
| storageBucket | Firebase storage bucket URL. | yes

#### 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 |
| componentsOnce | Sync initial value only; for components that don't change |

For example:

``html

`

To broadcast individual component properties, use the component|property syntax:

`html

`

$3

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.

$3

#### Browser Installation

Install and use by directly including the browser files:

`html










geometry="primitive: box; depth: 0.3; height: 0.3; width: 0.3"
material="color: #222">


camera look-controls wasd-controls
firebase-broadcast="components: mixin, position, rotation"
position="0 1.8 5">



`

#### 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).

Authors

- Kevin Ngo, Mozilla
- Amber Roy, AltspaceVR