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.
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>
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.”