A-Frame Framework
2017-08-24 00:00:00 +0000
This summer, while working in my university practice at an enterprise I discovered a great framework, A-Frame. I started looking at their web page, their examples and all the documentation they have (pretty good, nothing bad to say about it) and then I realized that it was a piece of cake. I mean, it gives me the opportunity to make something nice looking in a couple of hours, even less. It is a good starting point if you like VR or you want to experiment with it but you don’t know what to start with.
I’m not trying to say it is perfect or is the future of VR or something like that, far from it, but is a good starting point for this journey. You will find it not so mature as we would want, if it’s good enought for you, perfect!.
Installation
To get started we need first to prepare everything. First of all we need to install Node.js which comes with NPM. Once we have Node.js we just need to download the latests minified a-frame jar, create a file names “index.html” and add it as script in the head of our new index.html. We can also add the download URL of the jar directly as source. This should be our new file content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<script src="https://aframe.io/releases/0.6.1/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>
Note that we have some figures, extracted from the simple example provided by A-Frame developers. To test it just open the file in your browser (Firefox is more stable).
This is a rough and fast start, I strongly suggest you to check out the documentation and also it’s inspector. The inspector is a great addition, is very comfortable.
I’m currently working on a project using A-Frame, is not that spectacular but can be a good example of what you can you with little time.
Have fun!