Continuing With Our WebVR App Using A-Frame

WebVR with A-Frame Continued

Happy Sunday everyone! Today we will be building on the WebVR app that we created last week. We will be adding a cursor and filling out the blank space in the background to create a more filled in universe. Thanks to A-Frame there is not much that we must do to achieve our goals in this tutorial.

Adding In The Cursor

The a-cursor is a primitive that is given to us by A-Frame as a way in interact with our scene. There are other ways to achieve this effect by utilizing the components A-Frame provides for Vive, Oculus, and Samsung VR controllers. These are a lot more intuitive because it does not rely on us moving our coursing with our head/mouse for interactivity. But since I don’t have any of that equipment we will have to make do with the a-cursor.

We need to include a-camera in order to get to a-cursor. We then set the color for to blue because the default black color easily gets lost in our universe background. Go ahead and move it around to get a feel for it.

Filling In Our Universe

So our cursor works, awesome. Now lets get to work on adding a planet to our scenery. For this we will be using a primitive we haven’t seen before; the .

Including a-sphere is a lot similar to the way we called our a-box. I gave it a planet texture so it would look good in our universe. We are also able to manipulate the position of our a-sphere; I chose to have it be far away to emphasize the depth we can create in our a-scene.

Adding Some More Animation

Our planet looks great; however it still is a little on the dull side. What do planets do? They rotate of course, luckily A-Frame allows us to also use rotation animation so we don’t have to re-invent the wheel.

So just like our a-text; we nest the a-animation inside of our a-sphere to allow us to animate our planet. It is a little different than the animation we used for a-text so I will explain it.

Our animation’s attribute is set to rotation so that A-Frame knows to rotate our sphere, the duration is set to 20000 milliseconds. We set the “to” attribute rotate 360 degrees and we repeat this animation forever. Now when I first did this I was having issues with the animation stopping once the 20000 milliseconds was up and it would not start again until a few seconds went by. This would be fine it if wasn’t for the fact that planets don’t stop rotating (at least to my knowledge). That is were the easing attribute comes in, by setting it to linear out animation no longer has any cool down.

Wrapping Everything Up

So We learned two things today; adding in the cursor to our scene and a new primitive to play with and how to animate without a pause. For practice add some more planets in and play around with their rotations. As always the code will be hosted at the GitHub Project Page. And of course here is a link the to live site.