Creating VR Experiences Using Angular And A-frame

VR Technology is growing in a wide range in all aspects. But, learning the tech stack for its implementation is still a challenge for many web developers. What if we could have something which makes our work easy without writing all the boilerplate codes for its implementation and setup.

A-Frame is one open source web framework out in the market. It is used for building virtual reality experiences with simple HTML and entity components and can be deployed and viewed on any available device in the market without setting up any configurations explicitly. A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone, Android, and the Oculus Rift.

In this post, you will learn how to create VR experiences using Angular and A-Frame.

What is A-Frame?

                                              Figure 1. A-frame Website (Source: https://aframe.io/)

A-Frame is a framework for building rich 3D experiences on the web. It’s built on top of three.js, an advanced 3D JavaScript library that makes working with WebGL extremely fun. The cool part is that A-Frame lets you build WebVR apps without writing a single line of JavaScript (to some extent). You can create a basic scene in a few minutes writing just a few lines of HTML. It provides an excellent HTML API for you to scaffold out the scene, while still giving you full flexibility by letting you access the rich three.js API that powers it. In my opinion, A-Frame strikes an excellent balance of abstraction this way. The documentation is an excellent place to learn more about it in detail.

A-Frame brings to the game is that it is based off an entity-component system, a pattern used by universal game engines like Unity which favors composability over inheritance. As we’ll see, this makes A-Frame extremely extendable.

Entity Component System

The entity-component system is a pattern in which every entity, or object, in a scene, are general placeholders. The components are used to add appearance, behavior, and functionality. They’re bags of logic and data that can be applied to any entity, and they can be defined to just about do anything, and anyone can easily develop and share their components.

An entity, by itself without components, doesn’t render or do anything. A-Frame ships with over 15 basic components. We can add a geometry component to give it shape, a material component to give it appearance, or a light component and sound component to have it emit light or sound.

Each component has properties that further define how it modifies the entity. And components can be mixed and matched at will, hence the “composable” word root of “component”. In traditional terms, they can be thought of as plugins. And anyone can write them to do anything, even explode an entity. They are expected to become an integral part of the workflow of building advanced scenes.

Writing and Sharing Components

So, at what point does the promise of the ecosystem come in? A component is simply a plain JavaScript object that defines several lifecycle handlers that manages the component’s data. Here are some examples of third-party components that I and other people have written:

• Explode component

• Layout component
  

• Explode component

• Spawner component

• Extrude and lathe component

Small components can be as little as a few lines of code. Under the hood, they either do three.js object or JavaScript DOM manipulations. I will go into more detail how to write a component at a later date, but to get started building a shareable component, check out the component boilerplate.

Setting up your Angular project

Step 1: 

                                                  Figure 2. Adding script tag in index.html

Add, the below script tag between the head tag in index.html

<script src=”https://aframe.io/releases/0.8.2/aframe.min.js"></script>

Step 2:

                                                      Figure 3. Adding a frame scene tag inside the body

Add, A-frame scene tag inside body tag as shown above.

Now, run your Angular app using ngserve

.

                                            Figure 4. Running blank a-frame scene

You will see a blank page as shown above with a button to enter VR mode at the right end corner of the web page.

Step 3:

Now start adding the background to your VR scene by using A-frame sky tag as shown below:

                                                       Figure 5. Adding A-frame sky tag

Again, run your angular app again using ngserve.

                                                      Figure 6. Run view — after adding A-frame sky tag

Step 4:

                                                           Figure 7. Adding objects to your scene

From the above image, you can see that I have added four objects. Say a box, sphere, cylinder, and plane and defined its attributes as the position of the object, color of the object and height of the object. 

The position attribute follows the right-hand coordinate system where the negative Z-axis extends into the screen. To learn more about position attribute visit docs.

                                             Figure 8. The Position of the objects placed in the scene

Now on running the application, you could see your first VR scene using A-frame as shown below.

                                           Figure 9. Web VR scene after adding objects

Resources

You can find more examples on A-frame scenes here, which you can implement in your angular project.

You can find the code of the above example here.