Aframe Is an easy, effective, and free way to program Web VR. It is based on three.js, but it is its own language programmed in a completely different way, though you can still access all the three.js functionality. The beauty of AFrame is you can make a fully interactive VR room compatible with any internet accessing device without even touching javascript or CSS though you can (and will) still use them. Just like javascript all your code goes inside an HTML tag, mainly the <a-scene> tag. Unlike javascript, though, it still is HTML and is programmed as such. It actually works surprisingly well, I almost think that HTML was made for three dimensions. Anyway, let’s get into the actual code:
<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>
This is the AFrame hello world program, which should look like this:
Let’s break it down: First, In the head, we see a script tag that imports the AFrame library from the AFrame website, you can also download the library so you aren’t surprised by any sudden updates that could make your million-dollar game suddenly stop working. Next, inside the body tag we see the <a-scene></a-scene> tag, as I said before all AFrame tags go inside this tag. And yes, they do all start with a-. Inside the a-scene tags, we see several tags such as <a-box> and <a-sphere> these are called primitives, they are actually all just <a-entity> tags that have been simplified for the ease of new users. For example,
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
is actually just
<a-entity geometry="primitive: box" position="-1 0.5 -3" rotation="0 24 0" material="color:#4CC3D9"></a-entity>
So which one is best? According to the AFrame docs, the second is better but it really comes down to personal preference and ease of use. Though, I have to admit I prefer to use primitives. Though there is a time when primitives are very useful and that is when you want to make complex structures or stick things together. For instance, if we wanted to move the whole scene we could put it all of it in an <a-entity> tag like this:
<a-scene> <a-entity location="0 0 0" rotation="0 0 0"> <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-entity> </a-scene>
When you set the location or rotation of the entity it offsets all the entities inside it, essentially turning them into one big entity. And that’s about it for this article, check out the next and other Deep Dive articles by clicking here
