Virtual Reality is making its way onto the web. Several tools have been released to help developers create solutions that tap into web-based VR and AR. One of these tools is A-Frame, which can be found at https://aframe.io/.
The nice thing about A-Frame is that you don’t have to be a hardcore developer; If you know HTML, you can get started with right away. A-Frame is built on top of HTML as a framework for creating Virtual Reality experiences. It goes beyond providing just a 360-degree experience to allowing a full experience to be created using position tracking.
Because there is support for the major headsets, A-Frame is a real consideration for building VR solutions. Not only does A-Frame support Daydream, Vive, Rift, GearVR, and Cardboard, it also supports Microsoft Mixed Reality. In addition to the headsets, it also supports the corresponding controllers. Unlike some other VR solutions, A-Frame will still work on a standard desktop or smartphone that isn’t VR equipped.
A-Frame was created to provide an easy way to build VR as an extension to three.js, which is a JavaScript library and API based on WebGL for creating 3D computer graphics in a web browser. Because A-Frame is built on three.js, it supports the three.js API. You can, however, begin playing with A-Frame without digging into the API code. In fact, if you look at listing 1, you’ll see straightforward HTML:
Listing 1: The Standard Hello VR World App: A Cube!
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-scene>
</body>
</html>
In listing 1, you get your first exposure to an A-Frame Web app. You can see that the A-Frame code is included in the header within the script tag. With that in place, you can create a VR scene using the a-scene tag. In this case, the scene being created is a simple box that is slightly rotated. You can see the results in Figure 1. If you execute this listing in a modern browser, you should be able to use your mouse to move the angle at which you can view the box. View it in a VR browser and you’ll be able to look around as well.
Figure 1: An A-Frame web page showing a box
There are a number of basic items called primitives within A-Frame, including the box shown above. There are primitives such as a-box, a-sky, a-sphere, a-cone, and more. Using the primitives, you can begin to build more complex scenes such as the start of a snowman that is created in Listing 2 and shown in Figure 2.
Listing 2: An A-Frame Snowman
<html>
<head>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #7BFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#FFFF00" shadow></a-box>
<a-sphere position="1 1.25 -5" radius="1.25" color="#FFFFFF" shadow></a-sphere>
<a-sphere position="1 3.00 -5" radius="1.00" color="#FFFFFF" shadow></a-sphere>
<a-sphere position="1 4.50 -5" radius=".75" color="#FFFFFF" shadow></a-sphere>
<a-sphere position="1 3.00 -4.01" radius=".05" color="#000000" shadow></a-sphere>
<a-sphere position="1 3.20 -4.04" radius=".05" color="#000000" shadow></a-sphere>
<a-sphere position="1 2.80 -4.05" radius=".05" color="#000000" shadow></a-sphere>
<a-sphere position="1.05 4.30 -4.05" radius=".06" color="#000000" shadow></a-sphere>
<a-sphere position=".80 4.30 -4.05" radius=".06" color="#000000" shadow></a-sphere>
<a-cylinder position="1 4.75 -5" radius="0.5" height="1.5" color="#000000" shadow></a-cylinder>
<a-cylinder position="1 4.75 -5" radius="1.0" height=".01" color="#000000" shadow></a-cylinder>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#00FF0F" shadow></a-plane>
</a-scene>
</body>
</html>
Figure 2: The snowman created from Listing 2
The shapes that you build with are simple entities that share a common API which allows you to manipulate positioning, rotating, scaling and attaching components. Building basic shapes, however, only scratches the surface of what a tool like A-Frame will let you do. You also have the ability to incorporate materials, attach physics, apply lighting and more. You also can work with gaze-based interactions using an included cursor component along with a camera component.
The framework uses a standard ECS or Entity-Component-System architecture, which is common in 3D and game development. Additionally, you can write your own components using JavaScript that will allow you to mix and match components that you can then configure, reuse, and share. If you’ve created more complex models with tools such as Blender, Sketchfab, and Autodesk Maya, then you can load those models as glTF and OBJ files.
I’ll include one last listing to show the addition of physics into an A-Frame VR scene. This can be done by simply including an additional package in the header, as shown in Listing 3. In this listing, a ball and a plane are included. The ball falls from above when you load the scene.
Listing 3: Adding a Bit of Physics to Your VR Scene.
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene physics>
<a-sphere position="0 6 -4" color="#ABABAB9" dynamic-body></a-sphere>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#000000" static-body></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Figure 3: The Ball dropping in the scene
In Conclusion
A-Frame gives you a lot of power to build Web-based VR worlds. The framework removes a lot of the internals so that you can focus on the interface and interactions. If this article has piqued your interest, you can find more details at the aframe.io site.
