/a-frame-tutorial

Resources for the A-Frame tutorial found at https://docs.google.com/presentation/d/1O0y5WjAJxYq1StNHofLExKlBtZFizgoqkpDorxx3kR8/edit?usp=sharing

Primary LanguageHTML

First Look at A-Frame

This is a repository of the files generated to accompany a talk/tutorial on A-Frame.

The presentation slides can be found here

HOW TO FOLLOW ALONG

When the code examples begin, there will be the name of an html file in the bottom left corner. Simply open the file with the corresponding name in the pages directory in an A-Frame supported browser of your preference to follow along with the presentation.

Clone this repository locally, and make sure your browser has its Same-Origin - also known as CORS - policy disabled.

You can open the file using your terminal by using the command open html_file_name. Or you can drag and drop the file into your browser window.

FAQ

IMAGE ERRORS aka "Help, I don't see the skybox!"

If you're running this as a local file, you will find that you may have trouble loading the image asset because of the CORS protocol.

For the purposes of this tutorial, disable the Same-Origin policy in your browser or get an extension that will do it for you. Here's an extension for Firefox and here is one for Chrome.

MOVING AROUND aka "Help, I don't see the red box!"

Use the 'W', 'A', 'S', 'D' or the directional arrow keys on your keyboard to move the camera in the demo. Hold down left mouse button and drag and drop to move the direction the camera is looking to.

It's tricky, but the 'box' step added in web-vr-3.html is added to the left of the user, to intentionally demonstrate the 3D space and controls

If there are any questions or comments, feel free to contact me at lorrocha90@gmail.com.