CAC - WebVR Activity

An example activity handbook for undergrad students wishing to host a WebVR camp in their campus

Transcript

1. A-Frame Facilitator Guide for students Duration: ~1hr Audience Expertise Level: Beginner Pre-requisite knowledge: HTML, JS (optionally CSS)
2. Introduce WebVR Bring the attention of your audience over the key concept of WebVR and mention the advantages of experiencing VR on the web, as compared to the native options.
3. Introduce A-Frame Talk about A-Frame, why it was built and why it is tremendously useful ! Teach the ‘Hello World’ application on glitch (see next slide) and encourage the audience to add and edit the various attributes of each object.
4. Instructions Use Glitch ! Navigate to glitch.com, create an account and get yourself familiarized with the environment. You will use Glitch as a primary IDE for this workshop. Make sure to ask your audience to create accounts beforehand, in order to avoid unnecessary delays. Start with remixing the existing ‘Hello World’ app. Mention native options Although it is mostly tedious to set up a local environment for a workshop, it is necessary to tell the audience, the existence of such options. Mention the best known tools for setting up the local web development environment and remember to share links to the necessary web pages containing elaborate details for the same. Demo the use of glitch by using the side-by-side approach ! In a side-by-side approach, you need to have two windows open next to each other on the screen, one of which contains the code page in glitch, the other containing the output with changes shown in real-time. This is the most efficient use of glitch and makes learning a-frame interactive and easier.
5. In glitch, use of assets is simplified, allowing us to just drag and drop them in the assets folder. These assets can then be included as attributes of various objects present in your VR scene. The assets may include images, models, textures, etc. Uploading Assets
6. Demo a-inspector and familiarize the audience with a-registry Show how to include a community contributed component from the registry !
7. “ Let the audience explore the ‘student-makes’ repository as well as the official documentation on the aframe.io website.
8. conduct a mini-hackathon ! It’s time for the audience to test and apply what they learnt so far ! The best way is to fight it out in a mini-hack. Lure them with exciting swags as prizes and tell them that they are free to take assistance of anything available on the web ! However, make sure that the facilitator (that may be you !) is available to help them out in case they are stuck with something.
9. Work with entities and components Extended ideas ! Show them how to contribute to the a-frame github repo Use JavaScript to add interactivity and increase functionality Add them to community channels like slack and telegram.
10. Do you have suggestions to improve this guide? You’re all set! ◉ Email your suggestions to campusclubs@mozilla.com