Create your own virtual reality with A-Frame framework
Top

If you are a web developer and want to create your own virtual reality, do not rush to learn Unity or Unreal Engine, instead use JavaScript!

What is A-Frame?

A-Frame is an open source framework for creating virtual reality using HTML and JavaScript. A-Frame uses three.js, WebGL and WebVR, but knowledge of these technologies is not necessary. If you have any difficulties or questions, you can search for answers in steep documentation or ask the large A-Frame community.
A good example of the possibilities that this framework provides is the web application Web 3D/VR Object Explorer, which was developed by the JustCoded team.

Just a few lines of HTML are transformed into a whole world, which can be explored both on different types of VR devices and in popular browsers. That sounds great, does it not?

Getting Started

The A-Frame team provides various options to help connect your framework to the project. All of them are described on the A-Frame’s Getting Started page. In my case, I’ll just use the link to the CDN.

<!DOCTYPE html>
<html>
<head>
  <title>My own Virtual Reality</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
</body>
</html>

Building a Project

Well, you can start with something simple. For starters, we can create several geometric shapes.

All A-Frame elements must be inside the <a-scene> tag.

<body>
  <a-scene>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
    <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>

Now if you look at our page in the browser, we will see three beautiful figures. Do not forget to walk around them! A list of all possible primitives can be found in the documentation.

vr example image

Just a few lines of code allowed us to make our first virtual world. What could be simpler?

Creating a Real Project

I really like winter, and you? Let’s try to complicate our project and add a little festive New Year’s mood. First, delete all content from the <a-scene> tag.

A-Frame has a registry of custom components, we will use one of them to create snow in our project. To do this, we should include this component to the <head> tag.

<script src="https://unpkg.com/aframe-particle-system-component@1.0.9 /dist/aframe-particle-system-component.min.js"></script>

Now you just need to add this component to HTML.

<a-scene>
  <a-entity particle-system="preset: snow; particleCount: 5000" position="0 0.3 -3"></a-entity>
</a-scene>

As a result, we got snow! (CodePen)

vr example image

So, time to add earth and sky to our beautiful winter world. As the ground, we can use the a-plane component rotated by 90 degrees, and as the sky we will use a-sky component.

Our code will look like this.

<a-scene>
  <a-sky color="skyblue"></a-sky>
  <a-plane position="0 0 -4" geometry="primitive: circle; radius: 200" rotation="-90 0 0" color="#fff"></a-plane>
  <a-entity particle-system="preset: snow; particleCount: 5000" position="0 0.3 -3"></a-entity>
</a-scene>

In the end, we got a beautiful blue sky and snow-covered land (CodePen). Wonderful, and most importantly, easy!

A-Frame example image

What’s a festive mood without a Christmas tree? It is time to add it to our project. To do this, we will use the a-cone component to simulate the branches and the a-cylinder for the tree base.
In order to not select the values of the position properties manually, you can use the visual inspector (<ctrl> + <alt> + i). In this mode, you can freely travel around the stage and move the elements.

<!-- Christmas tree -->
<a-entity position="0.165 2.328 -4.37" material="color:green" geometry="primitive:cone; radiusTop:0; radiusBottom:0.8; segmentsHeight:20"></a-entity>
<a-entity position="0.183 1.003 -4.388" material="color:green" geometry="primitive:cone; radiusTop:0.4; segmentsHeight:14; radiusBottom:1.3"></a-entity>
<a-entity position="0.169 1.685 -4.357" material="color:green" geometry="primitive:cone; radiusTop:0.2; segmentsHeight:14"></a-entity>
<a-entity position="0.159 0.264 -4.314" material="color:#804000" geometry="primitive:cylinder; radiusTop:0.3; segmentsHeight:14; radius:0.3; height:0.5"></a-entity>

vr image

It is time to put a gift under the tree. A-Frame framework has the a-box component.

<a-box width="1.5" height="0.5" material="shader: flat; color: orange" position="1.06 0.242 -3.096"></a-box>

vr image

Looks boring, right? Add a beautiful gift wrapper for our box. To do this, add an image to the <a-assets> tag, which we will use and add an identifier to it.

A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance.

<a-assets>
  <img id="wrapper" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREFPlfNZulnaileX3VE0o5WKGji3kGSr3PRHI_a8j1MWDwMlKqBQ" />
</a-assets>

Next, all that remains is to replace the color property with src and add the corresponding identifier (CodePen).

<a-box width="1.5" height="0.5" material="shader: flat; src: #wrapper" position="1.06 0.242 -3.096"></a-box>

vr image

The final touch! We will hang garlands on our tree and, at the same time, we will understand how to register new A-Frame components. Before beginning this part of the project, I recommend reading about creating components in the official documentation.

To register components, use the registerComponents method of the A-FRAME object. It takes the name of the component to be used in HTML and the component description is a regular JavaScript object. It looks like this:

AFRAME.registerComponent('hello-world', {
 init: function () {
   console.log('Hello, World!');
 }
});

Ok, we can start creating the Garland component for our tree. The logic of this component will be as simple as possible: the component will randomly select a color from the list (in our case red, cyan, blue or yellow) and change the current color to the selected one with the specified time delay. Simple, right?

Here is an example of the code I wrote. Of course, you can write it better and more beautifully, but I will allow myself to leave it that way.

<script>
  function calcRandom(max, min) {
    return Math.round(Math.random() * (max - 1 - min)) + min;
  }

  AFRAME.registerComponent("garland", {
    schema: {
      delay: {
        type: "number"
      },
      colors: {
        type: "string"
      }
    },
    init: function() {
      var element = this.el,
          delay = this.data.delay || 2000,
          colors = this.data.colors || ["red", "cyan", "blue", "yellow"];
    
      setInterval(function() {
        let colorId = calcRandom(colors.length, 0),
            currentColor = element.getAttribute("material").color,
            newColor = colors[colorId];
    
        while (true) {
          if (currentColor === newColor) {
            colorId = calcRandom(colors.length, 0);
            newColor = colors[colorId];
          } else {
            break;
          }
        }
    
        element.setAttribute("material", "color", newColor);
      }, delay);
    }
  });
</script>

The component is ready! Now we can create as many garlands as we want. The example of creating one bulb looks like this:

<a-entity garland position="0 2 -3" material="color: red" geometry="primitive: sphere; radius: 0.05"></a-entity>

Pay attention to the word garland and this is the component which we created.

It remains a little fun with the creation of light bulbs and their positioning (do not forget to use the visual inspector, it will make it easier for you to set the position for the components).

The final version of the project can be seen here.

vr image

Conclusion

A-Frame is an excellent and fast framework for creating VR applications. It gives unlimited possibilities to web developers. In just a few minutes we managed to create a simple virtual reality world using JavaScript and HTML.

Useful Links

up

Please turn your device