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.
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.
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.
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.
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.
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).
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.
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.
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.
Since A-Frame is OpenSource, there are some components created by the community which is extremely useful because they present new possibilities which are not included in the core features.
The ones I found most interesting regarding shapes where the Curve Component , the Along Path Component , and the Tube Along a Path Component (which is included in a series of A-frame extras). Check the code bellow to see these components in action!
In case you are interested in checking out more components, there's this website called A-Frame Registry where you'll find a bunch of them.
CREATING A COMPONENT
Fell like none of the existing components do what you wish? In this tutorial by Ngokevin, you can check every step to making your own.
OCEAN COMPONENT
The ocean component is also one of my favourites. It's quite simple, but it works rather well.
OTHER COOL COMPONENTS
This component by Mayognaise makes your mouse behave entire like cursor
Ever wanted to use a gif as a texture? Now you can, with the Gif Shader Component by Mayognaise.
In case you want to dive into the more realistic world, here is a pretty good physics component by NgoKevin.
If you're aiming for multi-user experiences, Ngokevin created a Firebase component with all the needed docs and explanations for you to succeed!
For the music enthusiasts out there, there is also a component that analyses audio and animates shapes accordingly by NgoKevin.
Last, but not least, an amazing Mirror component by Alfredo.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!
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.
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
Dat.GUIVR Declarative Binding by Andres Cuervo
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.
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.
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.
Right Talent, Right Time
Turnkey technical teams and solo specialists
when you need them for greatest impact.
