A-Frame WebVR is a Javascript framework you can use to build virtual reality worlds.
A-Frame is a powerful entity component system framework for three.js. This three.js is a cross browser Javascript library that uses web GL API to create and display animated 3D computer graphics. It displays 3D computer graphics in a web browser without the use of plugins. Any developer can use A-Frame to create 3D and web GL scenes using HTML and without having an in depth knowledge of web GL.
A-Frame has a high level of compatibility with most libraries and frameworks such as Jquery, react and Vue.js. Using A-Frame, interactive VR experiences can be built for most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go, and for augmented reality. A-Frame works on both desktops and smartphones as it is based on HTML and javascript. (See source for reference).
Installation Process
You can use A-Frame with a variety of code editors, including glitch, codePen, and Visual Studio code. Glitch is the best code editor when you are just starting with A-Frame. It acts as a playground where users can access, copy, remix, and play with existing projects. You can host projects on Glitch instantly, thereby enhancing the project’s visibility.
On your computer, download and install a coding editor of your choice. Create an HTML file after installing your favorite coding editor. Just like in an HTML file, add the head and body elements.
Then, in your HTML file, add a script tag and an A-scene element. You can find the JavaScript build in the A-Frame documentation’s installation section. Copy the js build line of code and paste it into the head tag of the HTML element, then run the preview. For reference, A-Frame documentation is here:
Here is how your code should look like:
<html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html>
A live preview button will appear on the screen once you have finished creating your scene. You can use the browser console to inspect A-Frame WebVR information, such as entities and default light A-Frame elements.
A-Frame Basic Primitives
A-Frame provides various elements that wrap the entity-component pattern, called primitives. These primitives provided by A-Frame include <a-box>, <a-sky>, <a-plane>, <a-cylinder> and several others. You can also create primitives based on your own preferences. Here is an example with the basic A-Frame primitives:
<html> <head> <script src="https://aframe.io/releases/1.3.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>
These primitives have attributes and values assigned to them. Each primitive has its own attributes assigned to it. Let’s look at some basic primitives individually.
The Box Primitive
The box primitive helps developers to build and create shapes such as walls, boxes and cubes. Using some HTML attributes, you can modify the box primitive and alter it into shapes. Attributes that modify the box primitive are width, height, depth, color, and roughness. Other attributes that can be used to modify the box primitive can be found in the A-Frame documentation, here is the link: https://aframe.io/docs/1.3.0/primitives/a-box.html
Below is an example of a box primitive:
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
Here is the output showing a blue box:
You may not need some attributes used for the box primitive for other primitives.
The Cylinder Primitive
The cylinder primitive helps developers to build and create shapes such as tubes, curved surfaces, pipes and cylinders. The attributes used to modify the cylinder primitive are color, height, radius e.t.c.
Below is a code example of a basic cylinder primitive:
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
The Circle Primitive
The circle primitive is used to create circles or circular surfaces. The attributes used to modify the cylinder primitive are color, radius e.t.c.
Here is an example:
<a-circle color="#CCC" radius="20"></a-circle>
The Cone Primitive
This primitive helps developers to create cone shaped objects. It also has its own set of attributes.
The Sound Primitive
Different sounds can be applied to a virtual reality scene using the sound primitive. Here is a code example showing the sound attributes:
<a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
Conclusion
A-Frame WebVR is easy and accessible to basically everyone. It has similar syntax as that of HTML and runs on most browsers. Now go ahead, pick up a real project for beginners from glitch and explore A-Frame virtual reality.
If you want to learn about more ways to get started with VR, take a look at this article, “Getting Started with VR for Cardboard with Unity.”
