Creating VR experiences using React 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 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 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. 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

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:

• Text 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 in your React project

Check the steps below for creating VR experiences with React.

Step 1:

                                                                        Figure 2. Adding A-frame script inside the head tag

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 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.

Step 3:

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

<script src=”https://unpkg.com/aframe-mountain-component@0.3.2/dist/aframe-mountain-component.min.js"></script>

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

On adding this you can implement the entities whenever and wherever required in the scene.

Step 4:

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>

 <a-mountain src=”images/soil.jpg”></a-mountain>

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.

<a-sky src=”images/pano.jpg”></a-sky>

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.

Resources

You can find more examples of A-frame scenes here. Which you can implement in your react project.

You can find the code of above example here.