A-Frame Scenes

Repo for creating WebVR scenes using A-Frame, Three, and AR.js. If you don’t know about these libraries, they’re javascript based and they’re awesome! I created most of the objects in my scenes with TinkerCAD which is a free browser-based 3D modeling tool.

Moving forward I’d like to:

- enhance mobile performance of my space shooter game
- create multi-scene experiences without page redirects... maybe with React?
- do more things with AR.js
- animated experience with user-camera fixed along path

Getting Started with A-Frame

^{Option 1:} Fork this Git repo

After you have downloaded and extracted this .zip file containing the contents of this repo, open the resulting directory, and you’ll be have your scene ready in these few steps:

npm install && npm start
open http://localhost:3000/

^{Option 2:} Fork this Git repo 🍴🐙

Alternatively, you can fork this repo to get started, if you’d like to maintain a Git workflow.

After you have forked this repo, clone a copy of your fork locally and you’ll be have your scene ready in these few steps:

git clone https://github.com/aframevr/aframe-boilerplate.git
cd aframe-boilerplate && rm -rf .git && npm install && npm start
open http://localhost:3000/

Mobile pro tip: Upon starting the development server, the URL will be logged to the console. Load that URL from a browser on your mobile device. (If your mobile phone and computer are not on the same LAN, consider using ngrok for local development and testing. Browsersync is also worth a gander.)

Installation

First make sure you have Node installed.

On Mac OS X, it’s recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favourite browser:

http://localhost:3000/

If you wish to serve the site from a different port:

PORT=8000 npm start

License

This program is free software and is distributed under an MIT License.