First of all, for those unfamiliar with A-Frame, it’s a WebMR framework that combines HTML and Js and allows you to create indescribable experiences.

I’ve been learning it for the past months so I decided it was time to share my knowledge with you, by providing a list of examples and practice exercises with a lot of comments and explanations.

When I explain the logics behind how a certain exercise works, I’ll have a Codepen i-frame where you can view the code, and the result. I advise you to tweak it and discover on your own. However, A-Frame also has a very cool built in inspector in which you can “peak under the hood” of things. To trigger it just press Ctrl + Alt + I , while inside any website using A-Frame.

The links below are extra reading material, to accompany you throughout this blogpost. A-Frame school and the documentation section of the website will give you a very good ground to begin with.

Disclaimer: Open the drop downs to read the section you wish. Inside, in order for the codepens to run please click on them to load and use a recent version of Google Chrome. Also, there’s an AR example at the end of the blogpost, so you will need to have the web cam access turned on.

Basics

So, how should we start? The core elements of A-Frame are the sky, basic geometric shapes, and lights. With only these three elements we can do a lot of interesting things.

Important piece of advice: Read all the comments on the code, they are NOT repeated and sometimes will teach you stuff to prevent common errors or a bit more about the code.

Background

SKY The sky is basically a huge spphere in which you use an image as a texture that ends up serving as your background. You can use 360º images or plain colours for your sky. See the Pen Ex.1— A-Frame Sky by Filipa Cruz (@cr0ssing) on CodePen. After looking at the code you might have noticed the tag. This serves the purpose of creating the scene. By creating this tag, you tell the HTML that you will write VR related code in here This is like the body for A-Frame code. VIDEOSPHERE SKY In case you were wondering, yes it IS possible to have a video as your background. However, it's not called a sky entity. It's a videosphere. See the Pen Ex.1.1 — A Videosphere by Filipa Cruz (@cr0ssing) on CodePen. Another aspect that might have caused you some confusion is how I'm inserting the source in the tags. A-Frame has a cool and more organised way of storing assets (images, videos, etc). If you store all of that inside a tag, you can give it an id and then call it by that id on some other element's source, instead of having a huge link in the middle of the important code. tl;dr By storing all assets in the a-assets tag, you are creating a cleaner, easier to read and maintain code. CHANGING SKY If you're interested in changing the source of your sky while using the website, you'll have to use Javascript, select the source and change to the new source. In any case, you need this to be triggered by something, like hovering a target or clicking it. Since most MR users don't own a headset, you need to be able to trigger events with gaze. This just means the cursor will be visible and the user needs to place the cursor for a determined amount of time over it to trigger an event. See the Pen Ex.1.2 — Change Sky by Filipa Cruz (@cr0ssing) on CodePen. In order to create your own 360 images for the sky, you can use a 360 camera or make an equirectangular image in blender. For the second option, follow this tutorial by Jared Pike. If in the end of creating your 360 image you become really proud of it and want to share it with the world, check this tutorial by Andres Cuervo on how to use A-frame images for facebook 360.

Geometry

If you are venturing into MR, you'll probably want to know how to use 3D shapes in your favour for your many projects. POSITION One of the points in A-Frame that might cause people some confusion is Axis Orientation. A-frame is Y-up but for example, unreal is Z-up, math/physics is Z-up, so take this into consideration when creating/positioning elements. The easier way for me to understand it was (x,y,z)=(width,height,depth). See the Pen Ex.2 — Geometry by Filipa Cruz (@cr0ssing) on CodePen. TEXTURE To make the shapes more lifelike, you can add textures and play a bit with them by multiplying shape and texture colours, repeat textures, and much more. See the Pen Ex2.1 — Texture on Shape by Filipa Cruz (@cr0ssing) on CodePen. ENTITIES A-frame works as an entity component system. If you want to get to the bottom of what that is, and how it works, check this link. Bearing in mind the knowledge from the link above, most shapes can be declared as their usual tag or an tag. See the Pen Ex.2.2— Shape as Entity by Filipa Cruz (@cr0ssing) on CodePen. ANIMATIONS Another step to create interesting environments with shapes it's to animate them! Technically you've already seen animations, regarding the gaze cursor. But now I'll take the time to explain them a little bit better. See the Pen Ex.2.3 — Animating Shapes by Filipa Cruz (@cr0ssing) on CodePen.

Components

Lights

LIGHT TYPES Lights make your models look more realistic or allow you to create the right mood for your environment. For example, if you want a night scene you can't have a very strong yellow light right? Check the next pen to learn more! See the Pen Ex.3 — Lights by Filipa Cruz (@cr0ssing) on CodePen.

User Interaction

My dear fellow designers, these examples are not only, but mostly for you. I've tested and created some examples of UI elements that are very common in usual front-end. All of these are gaze triggered, so hover over the targets for a few seconds to see the effects. They're not 100% perfect, but it's a good start! In the Codepen bellow, you can find a Tooltip, a Simple Pop-up, a Modal Pop-up and a Dropdown. See the Pen Ex 4 — UI by Filipa Cruz (@cr0ssing) on CodePen. DATGUI This component was created by several A-Frame community members and it mostly takes care of Slider UI elements, but it has a whole lot of capabilities like Checkboxes, DropDowns and more, which you can check here. These two examples are the best I've seen, the first one allows you to understand the basics of the component, while the second one works in a different way and includes more advanced features. A-Frame PointLight by Dirk Krause See the Pen A-Frame PointLight by Dirk Krause (@dirkk0) on CodePen.

Dat.GUIVR Declarative Binding by Andres Cuervo See the Pen Dat.GUIVR Declarative Binding by Andres Cuervo (@cwervo) on CodePen. PORTALS For me, this is THE coolest feature of version 6 of A-Frame. You can have Portals as links to travel between sections or HTML pages. See the Pen Ex 5 — Portal by Filipa Cruz (@cr0ssing) on CodePen.

Augmented Reality

Yes, you read correctly! A-Frame also has the ability to use Augmented Reality, and it's pretty simple as well. A-Frame AR works based upon the Ar.Js library, and all you have to do is add some simple details to be able to use it. Based on this example by Jerome Etienne, I've made my own AR experiments, as you can see in the codepen bellow. See the Pen Ex.6 — Augmented Reality w/personalised marker by Filipa Cruz (@cr0ssing) on CodePen.

Tips and tricks

In case you want to run some tests, in the Github repo you'll find a variety of tools and tips for that effect. And don't worry if you don't have a headset or Google Cardboard around to try your projects, use this Chrome Extension.

Since good practices are ALWAYS important, here you can find a set of them so your code is easy to read, maintain and understand.

For my dear fellow designers and Sketch lovers, now you can export Sketch Artboards to VR with a plugin.

Something I found many people asking about in the A-Frame Slack Team is the fact that you can't trigger mobile VR mode automatically. On mobile phones, we rely on the fullscreen API that requires user action (like a tap on the screen) to initiate. A page cannot trigger it automatically. That's a restriction of mobile browsers.

Also, there was a problem with playing audio in iOS devices but this Audio Sprite seems to do the trick!

Further reading

For you to learn even more and reach the peak of your potential I leave you here some very useful links!

A-Frame School

A-Frame Blog

A-Frame Documentation

If you are interested in keeping up with what’s new on MR, check my blogpost series! It’s called MR Weekly and it already has 5 editions. MR Weekly #1 MR Weekly #2 MR Weekly #3 MR Weekly #4 MR Weekly #5 </p

Did you enjoy learning all this new stuff? Did you come up with any cool ideas where we can apply A-frame? Please reach out through our social media networks or e-mail! I’ll be more than glad to talk to you about any ideas or even questions you might have.

The cover image used is the image on the landing page of the A-Frame website. We own no rights to such image and only used it to make mention of the platform.