In my attempt to learn more about the world of AR and VR, I recently stumbled upon an amazing article by Pryash Thapa on Viget called Creating Your First WebVR App using React and A-Frame. Wanting to have a more thorough understanding of how this computer-generated world of Virtual and Augmented Reality works, I decided to follow his instructions step-by-step and wanted to share a few things that I learned along the way.
To start, what I greatly appreciated about this article was that the complete initial setup was provided. In trying to code along with a multitude of other AR and VR ‘code-along’ articles, I often found that key elements in the initial environment setup were often omitted leaving me a bit clueless as to how to get past the first step. This tutorial, on the other hand, was extremely well explained and helped me get up and running in a few lines of code by providing the github repo and explaining exactly what would be installed. In writing this blogpost, my goal is to share my learnings as I attempted to code along.
So after cloning the repo, I began reading about the two frameworks this app would be utilizing: A-Frame and React. A-Frame is an open-source web framework for building virtual realities in HTML, and React is a library for building user interfaces. The purpose of using React is its ability to attach ‘state’ to the objects being created.
What is state though? In React, ‘state’ refers to the parts of an object within an application that can change. My novice understanding is that maintaining changes in state can be quite difficult and React provides a way for us to more easily manage all of the objects states that we’ll be changing in our virtual reality.
Running yarn start, I fired up the development server and was able to see the full scene that we’d be creating for a little inspiration and then deleted everything within our Scene element to start from scratch.
But what is Scene? Scene is an A-Frame component that equates to the root of our project. It IS our project. All entities are contained within scene so therefore scene inherits all of the entities properties that are located within.
But then what is an entity? You know what, enough with the questions, let’s build this and figure it out as we code-along…
Establishing our Environment
First things first, we need some kind of environment for our world to come alive in. Since we are just beginning, we are going to use one that has already been created for us by aframe-environment. We now only need to import it into our app/initialize.js file and attach it to this beautiful virtual environment to our scene inside main.js.
So far, we’ve imported our scene from a 3rd party, aka A-Frame Environment, and attached that environment to our scene as a ‘prop’, or property.
With our scene set up, we’ll now be building upon it using Entities. Entities can be thought of like holding blocks. By themselves they do nothing but when we attach components to them they come alive!
So the first Entity that we will add to our scene is a cursor. This is what will allow us to interact with the environment using our cursor. In addition, we will wrap our cursor entity in a camera entity so that we can actually see what part of the scene our cursor is leading us to.
I want to point out here that each of these tasks perfectly outlines the architecture that A-Frame utilizes, which is an Entity-Component System (ECS). This means that within any project scene that you have created (in this case, that would be our ‘Starry Night’ scene that we imported from our 3rd party A-Frame environment), every single solitary object that you want to put inside of that scene environment, will have to be wrapped in its own entity. So our individual cursor object needed to be wrapped in an entity. The camera entity also had to be wrapped in its own entity. Within each entity, we can add components that can change the behavior or functionality of an object. It is through the entities that we add and the components that we assign to those entities that bring our scene to life.
In Part 2, we will continue to further break down additional elements of the A-Frame library and add a geometric entity inside of our scene!