top

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 SystemThe 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 ComponentsSo, 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 componentLayout component Explode componentSpawner componentExtrude and lathe componentSmall 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 projectStep 1:                                                   Figure 2. Adding script tag in index.htmlAdd, 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 bodyAdd, A-frame scene tag inside body tag as shown above.Now, run your Angular app using ngserve.                                            Figure 4. Running blank a-frame sceneYou 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 tagAgain, run your angular app again using ngserve.                                                      Figure 6. Run view — after adding A-frame sky tagStep 4:                                                           Figure 7. Adding objects to your sceneFrom 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 sceneNow on running the application, you could see your first VR scene using A-frame as shown below.                                           Figure 9. Web VR scene after adding objectsResourcesYou 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.
Rated 4.5/5 based on 11 customer reviews
Normal Mode Dark Mode

Creating VR Experiences Using Angular And A-frame

Jayesh Katta Ramalingaiah
Blog
01st Aug, 2018
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?

A-frame Website

                                              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:

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: 

Adding script tag in index.html

                                                  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:

Adding a frame scene tag inside the body

                                                      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

.

Running blank a-frame scene

                                            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:

Adding A-frame sky tag

                                                       Figure 5. Adding A-frame sky tag

Again, run your angular app again using ngserve.

 Run view — after adding A-frame sky tag

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

Step 4:

Adding objects to your scene

                                                           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.

The Position of the objects placed in the scene

                                             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.

Web VR scene after adding objects

                                           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.


Jayesh

Jayesh Katta Ramalingaiah

Blog author
Jayesh Katta Ramalingaiah is a Web developer. He has expertized skills in various domains such as Web, Android, IoT and good at developing Applications. He is currently engaged as a Developer at TCS, India. He is an Official Mozilla Representative, Reps Mentor, and a Tech-Speaker and has associated with Mozilla Communities and initiatives for more than 4+ years conducting 130+ events in his regions.
Website : https://jayeshkattar.github.io/

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

Thomas William

27 November 2018 at 1:24pm
Thanks for posting this article,it helped me a lot and i have cleared my confusion.

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount