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 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.
Setting up your Angular project
Figure 2. Adding script tag in index.html
Add, the below script tag between the head tag in index.html
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.
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
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.
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
You can find more examples on A-frame scenes here, which you can implement in your angular project.