What is AFrame? The short answer is that it is a webVR plugin that allows you to put 3D and VR programs in any web page. Let me show you the possibilities:
What you see above is the aframe demo program, It is ten lines of code and is compatible with every major VR headset and device that can access the internet. This means is that you can open that program you see above from the:
- Gear VR,
- Oculus Rift,
- HTC Vive,
- Google Cardboard
- and windows mixed reality.
Plus, it can run without a headset on desktop and mobile as you can clearly see above. So, theoretically, you could create an HTML5 game that can run on every major device ever.
How does it work?
It is built off of HTML (as you can guess) and that makes it really easy to get started programming with since HTML5 and javascript have to be some of the simpler programming languages out there. It is similar to three.js but Aframe supports VR as well as 3D. As I said, the demo above is only ten lines of code:
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <div> <a-scene embedded style="height: 300px;width: 600px;"> <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> </div>
As you can see the code is super simple and self-explanatory. You can even add javascript to make things like buttons or even entire games. (something I plan to do after I upgrade from my google cardboard)
How do I get started?
First and foremost, read their documentation since it comes straight from them and it is really good and easy to understand.
You could also check out some of my tutorials, I recently made one about how to get Aframe up and running, and one about how to make a button.
