What is AFrame? AFrame is a javascript plugin web framework that allows you to create 3d and VR programs very easily, It is open source and similar to (but no based on) three.js.
Getting Started
To get started check out the previous article in this series: Getting Started Programming Mobile VR For FREE With AFrame. This will teach you how to get PhoneGap up and running with the AFrame demo program. PhoneGap is not required but it makes it easier to quickly test your apps. If you are not going to use PhoneGap you can still use this tutorial, just copy and paste the hello world program from the AFrame documentation into your favorite text editor.
To get started, let’s look at the demo program:
<html> <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
For this program, we first import the AFrame library :
<script src=“https://aframe.io/releases/0.8.0/aframe.min.js”></script>’
Then we put a scene (see what I did there?) into our body :
<a-scene>
This is where we put all our AFrame code.
</a-scene>
Inside our scene we put entities, There are two ways we can do this:
Primitives
The first way we can add entities is with primitives, this is the way our hello world program does it. An example is <a-box /> or <a-plane /> and so on. Currently, there are 28 primitives.
<a-box>
<a-camera>
<a-circle>
<a-collada-model>
<a-cone>
<a-cursor>
<a-curvedimage>
<a-cylinder>
<a-dodecahedron>
<a-gltf-model>
<a-icosahedron>
<a-image>
<a-light>
<a-link>
<a-obj-model>
<a-octahedron>
<a-plane>
<a-ring>
<a-sky>
<a-sound>
<a-sphere>
<a-tetrahedron>
<a-text>
<a-torus-knot>
<a-torus>
<a-triangle>
<a-video>
<a-videosphere>
<a-entity/>
The second method is to create a <a-entity /> and then to assign it to be another entity, example:
<a-entity geometry=“primitive: box” />
I personally prefer the first method because it is much simpler and easier to remember, but there is a reason <a-entity/> exists, and it is a more advanced method, but very useful, you can use <a-entity> code here </a-entity> to make an object made of more objects, such as a character in a game. (A tutorial on that later)
How to use them:
So now we know what they are, how do we use them? There are a lot of different entities so for this article I will focus on the <a-box/> since it has the basic features of most of the other entities.
<a-box position=“-1 0.5 -3” rotation=“0 45 0” width=”1″ height=”1″ length=”1″ color=“#4CC3D9”></a-box>
position:
position=”x y z”
you want to note that y and z are reversed from traditional coordinate systems where z is up and down.
rotation:
rotation=”x y z”
once again y and z are switched.
width, length, height:
size is different from the others since each variable has its own component and the length and height are not reversed.
color:
color=”#html color”
the color is an HTML color, I suggest using the w3schools color picker
