Last week I talked about the awesome AR.jsthat allows you to create cool augmented reality applications with only Javascript. This week I'm going to dive into AR.js's one dependency, A-Frame, and see how it makes the magic happen.
What is A-Frame?
Originally conceived within Mozilla, A-Frame is a web-framework for building virtual reality experiences. Being based on top of HTML makes it simple to get started. A-Frame is now maintained by Supermedium and is an independent open-source project. It can be used within the browsers with mouse controls and supports most VR headsets such as the Vive, Rift, Gear-VR, and Oculus using motion controls.
The core of A-Frame is it's entity component that lets you define objects and their attributes: these can be your own 3D models or some of the primitives objects provided by the frame work(a-box, a-sphere, a-sky, etc).
Code example
Here is an example of A-Frame at works, you can see this example live here.
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/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>
As you can see, the only thing we have to do is toss in A-Frame as a script tag in the head, no installation required.
Inside the body we have our a-scene, the container for the 3D scene we're trying to create. Inside of that we have five primitives. A-Box, a-sphere, and a-cylinder, each being an entity we declare with size and color properties. Under there, both in the code and the render, we declare a a-plane, and finally, we declare an off-white a-sky entity.
Aframe's site has a lot of other examples, both using mouse controls and VR motion controllers. This one is my favorite, nothing says VR like 80's vaporwave a e s t h e h i c.
You can check out the collection of example available here at A-Frame's website, if you click "View Source" in the top corner it will open them in a separate tab and you can use the developer tools to look at the code, or click "Visual Inspector" to see how each entity is defined, you can even click each one to mess with their properties and watch the scene change in real time!
Conclusion
VR doesn't have to be hard and it's certainly not as daunting of a task as it might seem. Using A-Frame you can create 3D VR environments in a matter of minutes instead of hours, and being an open-source project means it's completely free and will constantly be made better by the community. I look forward to playing around with A-Frame and seeing VR continue to grow.
As VR headset development continues they'll become cheaper and more accessible to the public, so now is a good time to get ahead of the curve and create some awesome VR experinces!
Oldest comments (1)
I couldn't agree more, thank you for your comments. The developers at iwanta.tech/ are bringing the most advanced technology to create impressive VR experiences, so the accessibility of the headset also makes a big difference.