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 which is used for building virtual reality experiences with simple HTML and entity components which 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 build virtual reality experiences with React that work across desktop, iPhone, Android, and the Oculus Rift.
In this post, You will learn how to create VR experiences using React 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. Then 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
Setting up in your React project
Check the steps below for creating VR experiences with React.
Figure 2. Adding A-frame script inside the head tag
Add, the below script tag between the head tag in index.html
Figure 3. Adding A-frame scene tag inside the body tag
Add, A-frame scene tag inside body tag as shown above.
Now, run your angular app using npm start.
Figure 4. On running the react project with empty A-frame scene
You will see a blank page with a button to enter VR mode at the right end corner of the web page.
Now, in this example, I’m gonna create a scene where you could see small droplets of water falling, and will also include a panoramic image with flowers and small mountains around.
So, to make the water droplets fall and visualize mountains we include a predefined A-frame particle and mountain component library in the header part as shown below.
Figure 5. Adding particle and mountain component library
Add, the below script tags between the head tag in index.html
On adding this you can implement the entities whenever and wherever required in the scene.
Now, I’m implementing the particle system library and mountain component library in the scene as shown below.
Figure 6. Adding mountains and rainfall in the scene
Add, the below a-frame tags between in the scene as shown above.
<a-entity position=”0 2.25 -15" particle-system=”preset: rain”></a-entity>
Now run your React application again you would see similar thing as shown below. I have added an image soil.jpg to make the mountain soil look like the one in the image. You can also ignore adding a soil image by default plain mountains appear.
Figure 7. Scene After adding the mountain and particle A-frame tags
Now as we see small droplets falling down and see the sky empty without clouds. To make the scene more attractive I will add a panoramic sky image to make it more realistic.
Figure 8. Adding A-frame sky tag
As shown above, I have added an A-frame sky tag with a panoramic image in the scene.
Now on running your React application again. You can see your scene as shown below.
Figure 9. Your Final React VR scene using A-frame
You can actually add more elements into the scene based on your idea and visualize your react web application with a VR feel.