Skip to content

Latest commit

 

History

History

Aframe-VR demo with Firebase

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

AFrame Live Demo

Introduction

This is a simple repository containing some files to give a live AFrame presentation, using Firebase as your backend service framework. You will be able to code live on your computer, and your audience will see the results live on their own devices.

Installation

In the configuration directory, copy the contents of editor-conf.dist.js to editor-conf.js and firebase-conf.dist.js to firebase-conf.js.

Firebase

  1. Create a new instance at Firebase
  2. Click Add Firebase to your web app. Copy the contents of the config variable in the firebase-conf.js file at the indicated spot.
  3. Go to Database -> Rules and change the rules to...
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

PLEASE NOTE: These rules will give anyone read and write access to all data in your Firebase database. For now, we're assuming that your audience will play nice and won't muck with anything, but I will be adding some additional instructions on how to properly secure your database in the future.

Editor

In the editor.conf.js file, you can add templates that will be added as buttons to the editor page to quickly copy/paste code into the editor.

The editor itself makes use of Ace for an easy-to-use code editor.

Instructions

  • Host these files online, possibly remove the editor.html page online to avoid any tampering, and send your audience to the index.html page.
  • You can use the code editor on the editor.html page online or on your local computer to change the scene online.
  • Wow and inspire your audience with how easy it is to build WebVR using AFrame.

Todo

  • Instructions on how to secure Firebase from any editing.

Inspiration

Thanks Ruben for inspiring me with the Idea behind this project.