• Stars
    star
    444
  • Rank 94,913 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[DISCONTINUED] Hello, WebVR starter kit for A-Frame.

A-Frame Boilerplate

Boilerplate for creating WebVR scenes with A-Frame.

Alternatively, check out the A-Frame Starter on glitch.com for a more interactive way on getting started.

Getting Started

There are two easy options for obtaining this A-Frame scene. It's then up to you to make it your own!

Option 1: Download the ZIP kit ๐Ÿ“ฆ

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


Option 3: Fork this CodePen example ๐Ÿด๐Ÿ’พโœ’๏ธ

Or, you can simply fork this CodePen example to dive right in. Enjoy!

Publishing your scene

If you don't already know, GitHub offers free and awesome publishing of static sites through GitHub Pages.

To publish your scene to your personal GitHub Pages:

npm run deploy

And, it'll now be live at http://your_username.github.io/ :)


To know which GitHub repo to deploy to, the deploy script first looks at the optional repository key in the package.json file (see npm docs for sample usage). If the repository key is missing, the script falls back to using the local git repo's remote origin URL (you can run the local command git remote -v to see all your remotes; also, you may refer to the GitHub docs for more information).


Still need Help?

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.

More Repositories

1

aframe

๐Ÿ…ฐ๏ธ Web framework for building virtual reality experiences.
JavaScript
16,219
star
2

awesome-aframe

[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
1,335
star
3

a-painter

๐ŸŽจ Paint in VR in your browser.
JavaScript
671
star
4

aframe-inspector

๐Ÿ” Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
JavaScript
640
star
5

a-blast

๐Ÿ’ฅ Save the World From the Cutest Creatures in the Universe!
JavaScript
125
star
6

aframe-school

๐ŸŽ’ Interactive workshop and lessons for learning A-Frame and WebVR.
CSS
102
star
7

aframe-site

๐Ÿ…ฐ๏ธ Official A-Frame site.
JavaScript
99
star
8

aframe-registry

[DISCONTINUED] Curated collection of community A-Frame components.
HTML
77
star
9

aframe-presentation-kit

๐Ÿ“น Starter slides for giving talks and presentations about A-Frame.
CSS
74
star
10

a-saturday-night

๐Ÿ’ƒ๐Ÿผ Record and share your dance moves with motion capture in WebVR.
JavaScript
73
star
11

assets

๐Ÿ“ฆ Assets used in various A-Frame examples and boilerplates.
36
star
12

sample-assets

๐ŸŽ‘ Sample assets for the Inspector.
JavaScript
9
star
13

aframevr.github.io

* Generated from https://github.com/aframevr/aframe-site *
HTML
9
star
14

releases

๐Ÿš€ Releases directory served on https://aframe.io/releases/
JavaScript
4
star
15

slack-invite

๐Ÿ“จ Auto-invite for the A-Frame Slack.
HTML
3
star
16

slackoverflow

Web hook that posts tagged Stack Overflow questions to Slack, updated using reaction emojis.
Go
2
star