Lets talk about A-Frame
Tags: vr, javascript, beginners
Published: 2023-10-21 13:27:32

## Introduction

A-Frame is essentially a web framework that can be used to create a VR experience on top of your HTML. How cool is that? A-Frame is compatible with most VR headsets including the GearVR and Oculus Go.

## Why A-Frame?


- **Easy Setup**

A-Frame handles all the boilerplate setup to create the 3D experience for you. All you have to do to begin is create an HTML file , add a `<script>` tag with the A-Frame CDN and then drop `<a-scene>` tag and voila. Your initial VR scene is ready.  
 
- **Its like coding in HTML**

So A-Frame follows a concept of declarative HTML and since HTML is easy to read and understand , A-Frame is accessible to everyone.

- **Works on multiple devices**

Now A-frame like mentioned earlier works on most VR headsets but you also have the comfort of using them on a normal desktop or even a smartphone.

- **Entity Component Architecture**

While we code on top of HTML that is just one cool feature. The developer simultaneously has access to Javascript , DOM , Three.js , WebVR and WebGL.

- **Visual Inspector**

Now as a front end developer myself I highly appreciate the use of developer tools to allow me to inspect elements. A-Frame provides a Visual Inspector of its own that allows us to view/inspect the various aspects of the scene. We can open the scene using `<ctrl> + <alt> + i` or `<ctrl> + <option> + i` 

## Lets build our first Scene

Now lets create our first VR scene on A-Frame.

Create an HTML file the following structure

```
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>
```
In the `<head>` tag add the A-Frame CDN 
```
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
```
Inside your body tag add an `<a-scene>` tag.

Now that the initial setup is done we can start by adding elements to the scene.

Now we need to create an assets section using the `<a-assets>`. Inside the `a-assets` section is where we add all our assets like images and videos. Remember to provide each asset with an `id` attribute as we use this ID to point to the asset wherever we require it.

So lets begin with a background image . Let's add a random panoramic Image I found online with the `id="background"`. 

Now let's add an a-sky element with src pointing to this image like so. 

```
<a-sky src="#background"></a-sky>
```

Now once you run the html file your Vr scene should look like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pnd2i9b51103145kvx4.png)

and your code will look like this.

```
<html>
    <head>
        <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets>
                <img src="./background.jpg" id="background"/>
            </a-assets>
            <a-sky src="#background"></a-sky>
        </a-scene>
    </body>
</html>
```

Now lets add some shapes to the Scene. A-Frame provides use with some primitive elements to use in the scene. For now lets add a box and a sphere. Add the following code

```
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
```
The position attribute determines the position of the element in the scene using x-y-z coordinates.

Now your scene should look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev7e1c8j50ql360dk54f.png)

And your final code should look like this.

```
<html>
    <head>
        <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets>
                <img src="./background.jpg" id="background"/>
            </a-assets>
            <a-sky src="#background"></a-sky>
            <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> 

        </a-scene>
    </body>
</html>
```

## Conclusion

You have successfully created your first scene using A-Frame.
I hope this articles helps more front-end developers like me understand how easily a VR scene can be created. Thank You.