Virtual reality (and augmented reality) have become major buzz words in educational technology. With inexpensive VR headsets, such as Google Cardboard, and the use of student smart phones, teachers can take their classes on virtual reality field trips - a much more preferred trip to administrators than pouring money into bus fuel. But besides immersing students in gimmicky games and field trips until the VR sickness kicks in, how else can virtual reality be leveraged as a learning tool?
Building with A-Frame
I attended the annual Computer Science Teachers Association (CSTA) Conference in Omaha, Nebraska. I had made it my personal and professional mission to learn how virtual reality could be used as a learning tool in computer science education. On the very first day I dove into a VR workshop where I discovered one method of programming virtual reality worlds and creating interactive 3D environments.
Anyone who thinks code must be developed from scratch is kidding themselves. Coding is rarely done in isolation and often builds on the work of others. The VR workshop introduced me to A-Frame, a web framework for building virtual reality experiences - as described on its website. A-Frame comes with a plethora of documentation, tutorials, and starter code. It's really quite an amazing framework. As a workshop cohort, we used the tutorials to better understand the framework's primitive objects, entities, and elements. A-Frame can be housed on a local server or accessed using an online code editor such as CodePen, Mozilla Thimble, or Glitch.
 |
| A-Frame Entities |
Coding in Glitch
Glitch is a fun coding playground where remixing others' code is encouraged to create new and exciting programs. It's a very functional tool and completely web-based. In order to save your work, a GitHub account is required. A-Frame has a repo of starter code on Glitch. In the first A-Frame tutorial you'll learn to play with 3D primitive geometric shapes. Opening the A-Frame project on Glitch, I began tinkering (or remixing) with the 3D shapes using JavaScript and HTML. Each 3D entity has transformations that can be altered.
- position (X-, Y-, and Z-axis)
- rotation (pitch, yaw, and roll) - respectively (around the X-axis, around the Y-axis, and around the Z-axis)
- scale (X direction, Y direction, and Z direction)
 |
| Right-handed Coordinate System |
Changing the position values for the X-axis moves your entity to the right or left. Any changes to the Y-axis position values moves your entity up and down. The Z-axis position value indicates how close the entity is to you or the camera. You can use this position value to move your entity closer or farther away.
After playing around with the starter code and learning about ways to transform the entities with my terrific partners sitting beside me, I was able to create a primitive VR environment I called a-little-3D-world.
 |
| A Little 3D World Code |
 |
| A Little 3D World Screen Capture |
One thing I really like about using the Glitch code editor is the ability to work on the code and see my edits instantly. Just by selecting the "Show" button, I can view the VR environment in another browser tab. If you don't like the separate tab for viewing your program, Glitch also comes with a split-screen mode - just by selecting the "Both" button. Now you can code and test the environment easily and quickly.
Interactive VR World
After my workshop partners and I played around with the starter code, we moved on to Level 2... animation. I won't go into too much detail here, but we began following the awesome A-Frame tutorials to begin building a VR world where users can interact with entities. This required the use of lighting and camera controls, a cursor ring, and ray casting - the use of a ray from the environment's camera to detect where the user is looking. Although I'm not quite finished with my VR point game project, feel free to take a look and remix it on Glitch!
 |
| Point Game Code |
 |
| Point Game Animation |
If you want to try any of my VR projects on Glitch using a VR headset, simply select the VR icon in the lower-right corner when in "Show" mode in your smartphone's web browser. Then slide your phone into your VR headset and have fun!
Comments