An Introduction to creating Web Apps with WebVR using A-Frame

Okay so finally here it is, some meat and potatoes for everyone. I am going to be working on a tutorial series for WebVR. At this point in time I can’t commit to a set-in stone schedule on releasing these, but I will aim to get them out every Friday. Before we begin let me just go over some facts. WebVR is an open standard that aims to bring VR to your web browser. Let us go over some quick Q&A before we get started.

Do I need an expensive VR headset? No not at all, with WebVR you can use your mobile phone as a cheap head set if you utilize google cardboard. You can even use your web browser on your computer to view the scenes you make.

Is there a lot of software to install? Nope, just the latest version of Firefox nightly for desktop development and you are good to go!

Are we going to have to code everything from scratch? No, we will be using the A-frame framework to create our projects.

All right let us get started. First things first go over to https://www.mozilla.org/en-US/firefox/channel/desktop/ and download the latest “Nightly” version of Firefox. This version of Firefox will allow us to view the projects that we create. Once you are all set with that go ahead and create a simple html file with a html skeleton.

The simplest way to get started with A-frame is to drop their cdn into the head of our html code.

The next thing we need to do is create a scene that will store all our 3D entities.

The first thing we will do is add one of A-frame’s standard primitive . All primitives need to be inside of the or else you are going to run into a lot of issues.

You may have noticed the position property was added to the a-box, this tells A-frame exactly where the box should be in the 3D realm. The position property uses 3D axis to position your entity; position=”x y z”. The x-axis controls if the entity will go left or right regarding the 3D plane. Negative values make the entity go left and positive values make the entity go right. The y-axis controls if the entity goes up or down; a negative value makes the entity go down and a positive value makes the entity go up. The z-axis determines where the in the distance our entity will be place; a positive value will make the entity appear behind us while a negative value will make the entity go in front of us. To make things simple I will simply place the box right in front of us with our viewpoint looking down at it. We will also give the a-sky entity a color of blue for simple background to contrast our a-box.

Added WebVR a-box and a-sky

Okay great, we made a very basic scene but something seems to be missing. Our box looks great but unless you are going for some abstract look, we should add some texture to it! You can grab some texture over at https://freestocktextures.com/texture/ or go out and get some of your own. For this tutorial just keep your texture files in the root directory where your index.html file is in. To add the texture, we simple use the src property within our elements tag. To use this properly we need to get rid of our color property.

added texture to WebVR a-box

I gave my box a simple wood plank texture. Nothing fancy but it gets the job done. We can also add some texture to out sky entity, let’s go find a nice panorama to fill it in. I chose an 8k resolution picture of the milky way. 8k might be overkill but for textures the higher the quality the better. Again, we need to strip the color property out to make it work and include a source for the texture.

added texture to WebVR a-sky

Okay we are looking better but it looks like we are just floating into space. Let’s add some ground for us to be on. For this we are going to use the a-plane entity and we are going to add some properties we haven’t seen yet.

added WebVR a-plane with texture

We set x-axis of the rotation of the plane to -90 so that it we force it orient itself along the XZ axis instead of it defaulting to the XY axis. We then assigned the width and height of the plane to 20, please keep in mind that these numbers are measured in meters. You may have notice that I changed the y-axis of our a-box, this is because it was clipping with the a-plane and just adding that .5 made the box sit perfectly on top of the a-plane.

So, we are looking a lot better than we used to. Let’s add a simple animation to our scene so it can really pop out! We are going to animate some text using the built-in animation system and the primitive a-text.

added WebVR a-text

As you can see we added a-text and wrapped it around a-animation. We center our text and position it right above our a-box. The position attribute was selected and changed to alternate the y-axis from 2.0 to 2.2 for a duration of 3 seconds and we set it to go on forever. This is a basic way to animate using A-frame. We can even have things animate when we interact with them, but we won’t go over this just yet.

One last thing to add to our scene is custom lights. A-frame already provides default lighting for our scene since we didn’t include it initially so let me show you how to override that using the a-light primitive.

added WebVR a-light

The a-light was set to ambient so that it applies to everything in the scene and was given the rgb color value of 216, 247, 255. We also assigned it the type of point so we can position where we would like the light to go in our scene. I positioned it higher and farther away than our a-box and a-text entities.

And with this we created out very first A-Frame scene complete with the basics to make it looks good. There are a lot more primitive types to play around with so I recommend giving it a shot. All the code for this is hosted over at my GitHub account where I have it hosted on github pages so you can play around with it https://josephbriancruz.github.io/WebVR/