Welcome to the Music-cradted Digital Environments with A-Frame
With this workshop, we will start learning about A-Frame and then create 3D environments based-on music with the framework. We will start with the basics of A-Frame investigating the ideas it offers. After setting up a base-level we will create our own custom component, to turn music into "city scapes".
This is a hands-on workshop, code samples with multiple check points will be provided but it is also encouraged to code, doodle and play.
A-Frame gives the popular WebGL library three.js a DOM-like structure and allows us to create VR-compatible worlds using HTML. A-Frame encourages a structure and modularity helping us build larger things easier.
A-Frame or three.js experience is not necessary but knowing fundamentals of HTML, javascript and CSS are required.
Do not forget to bring your laptop (bring your power adapter!) with the basics setup either as a repo or as the zip file. If you are comfortable with repos and branches using the repo is suggested. Just fork this repo and work on your own.
Bring your headphones and your favorite song as a file (Amazon sells individual mp3 files).
Also feel free to bring your mobile VR headset if you have one; however, desktop browsers will be the focus of the workshop due to time limit.
- Once you grab the repo or the zip file (extract the zip file to folder).
- Install node.js from https://nodejs.org/en/ (We will use node to host a simple webserver as well as some functional utilities).
- Once node is installed go to the project in terminal or command line or git bash and execute
npm install(if you are unfamiliar with node.js, this command will install all the neccessary tools for us) - Once all npm install finishes, run
gulp watch. This will start your default browser and go to the address "http://localhost:3000" (If not feel free to contact me). - Make sure you have good text editor to work with.
- Launch the
index.htmlin your text editor, make a change and save. The gulp process should automatically refresh your browser and show you the change.
The first part of the workshop will be learning the idea behind A-Frame as well as the fundamentals of the framework. The second part will first discuss creating artifacts using sound as a source and then move to create a city using a song and A-Frame. There will be time at the end of the workshop for individual explorations.
Presentation materials will be added after the workshop.
- A-Frame website: https://aframe.io
- A-Frame github origanization: https://github.com/aframevr
- A-Frame Slack: https://aframevr-slack.herokuapp.com
- A-Frame component registry: https://aframe.io/aframe-registry/
- Awesome resources for A-Frame: https://github.com/aframevr/awesome-aframe
- Bay Area A-Frame meetup: https://www.meetup.com/A-Frame/
- A-Frame blog: https://aframe.io/blog/
Document version 1.00