Create An Animated VR Site With 30 Lines Of Code
Tags: beginners, javascript, html, webdev
Published: 2020-07-24 22:09:00

Note: The live code for this tutorial can be found [here](https://stirring-fan-throat.glitch.me/)

## Adding VR Into Your Site Is Easy
Adding virtual reality into a website is as simple as using regular HTML thanks to a library called [A-Frame](https://aframe.io), which is a framework for building virtual reality in the web. 

In the same way that you initiate HTML content with the `<body>` tag and add text using something like the `<h1>` tag, A-Frame lets you initiate a VR scene using the `<a-scene>` tag and you can add 3D content into your scene using tags like `<a-box>`, `<a-sphere>`, and more. 

It's worth checking out the A-frame [starter example](https://glitch.com/~aframe) to see just how easily this is done.

## What we are building
My example will be slightly more complex than the A-Frame starter scene. Instead of building a pure VR scene, I want to overlay 2D content on top of the VR scene. In this way, the VR aspect acts as a fun background and you can still display 2D content on the screen. Pretty cool, let's get started!

## High Level Code Overview
There are three core tasks to be accomplished here:
- Create the VR Scene
- Create the HTML overlay container
- Add HTML into the container

I recommend following along with the live code [here](https://glitch.com/edit/#!/stirring-fan-throat?path=index.html%3A20%3A8).

### Create the VR Scene
First we must load the A-Frame library into the HTML code. Second, we will load `aframe-extras` which is a user created library that adds a few additional components we can use. In this case, we want to use the `<a-ocean>` component.

To import these libraries, add the following into the HTML `<head>` section: 

```html
 <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
 <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
```

Now we are ready to create a VR scene.

The `<a-scene></a-scene>` tags are used to initiate a VR scene, and 3D objects are placed inside of these tags. The basic components of any 3D scene are: a camera, lights, and of course some 3D objects. `<a-scene>` creates a camera and basic lighting by default. 

Our scene will consist of the `<a-ocean>` tag which has a cool wave animation, and a few lights to add some color into the scene. To create the lights, the `<a-light>` tag is used and properties are added to set the color and position. 

Adding a property to an A-Frame element is the same as adding a property to an HTML element. Below is an example of how to set the `color` property to "red" on a `<a-light>` element.
```html
<a-light color="red"><a-light>
```
The code for the entire seen in only six lines of code and shown below:
```html
  <a-scene>
    <a-ocean color="#ffffff" rotation="0 0 0" width="50" depth="50" density="80" position="0 0 -4"></a-ocean>
    <a-light type="point" color="#ffef00" intensity="0.7" position="0 0 0"></a-light>
    <a-light type="point" color="#0815fa" intensity="0.7" position="10 0 0"></a-light>
    <a-light type="point" color="#ff0000" intensity="0.7" position="-10 0 0"></a-light>
  </a-scene>
```
### Create the Overlay Container
By default, the VR scene takes up the whole screen. In order to overlay 2D content, we must create a new set of `<div>` tags and use CSS to tell the browser that we want that div and all of its contents to sit above the VR scene. 

We will first create an `overlay` class using CSS. Note I've added additional styling that uses [CSS flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to center everything inside of this overlay container.
```css
.overlay {
  /* To create the overlay   */
  position: absolute;
  z-index: 10;
  /* To center all elements inside the overlay  */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
```

### Add Some HTML
Lastly, we need to some content into the overlay container. For this example, I'll just add some text. 

The full HTML for our overlay section is:
```html
  <div class="overlay">
    <h1>Totally Rad Title</h1>
    <p>Try this on mobile for a neat VR effect</p>
  </div>

```

And that's it! With this, we have created a 2D overlay on top of a VR scene. The full HTML code (with comments) for this example is:
```html
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- load aframe   -->
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <!--  load aframe-extras to get access to the <ocean> component  -->
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
    <!--  import a funky font  -->
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> 
    <!--  load styling to enable html overlay  -->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--  overlay any html over aframe scene  -->
  <div class="overlay">
    <h1>Totally Rad Title</h1>
    <p>Try this on mobile for a neat VR effect</p>
  </div>
    <!-- create animated ocean scene using aframe.io   -->
  <a-scene>
    <a-ocean color="#ffffff" rotation="0 0 0" width="50" depth="50" density="80" position="0 0 -4"></a-ocean>
      <!-- lighting determines color of ocean animation -->
    <a-light type="point" color="#ffef00" intensity="0.7" position="0 0 0"></a-light>
    <a-light type="point" color="#0815fa" intensity="0.7" position="10 0 0"></a-light>
    <a-light type="point" color="#ff0000" intensity="0.7" position="-10 0 0"></a-light>
  </a-scene>
</body>
</html>
```

# Next Steps: Customize This Code
[Glitch](https://glitch.com/) is one of the best sites for quickly creating and sharing projects. Remix the code for this project [here](https://glitch.com/~stirring-fan-throat).

Some inspiration for how to tweak this example:
- **Change the lighting**: Try using different `color` properties on the `a-light` elements (lines 25-27) for different effects.
- **Change the ocean density**: The spacing of the "ocean waves" are determined by the `density` property of the `a-ocean` component (line 23). Use a small value for larger waves, and a large value for smaller waves.
- **Add more 3D objects**: Feel free to add more shapes into the scene. Maybe rotate the ocean 90 degrees and add some new components to create an island. See the [A-Frame documentation](https://aframe.io/docs/1.0.0/introduction/) to see components are readily available.
- **Move things around**: Try changing the `rotation` and `position` of different elements. Both of these properties accept a text string consisting of three values i.e. "90 0 0". The three values represent the x, y, and z axis, respectively. 


# Useful resources
- Learn more about building VR in the web with [A-Frame](https://aframe.io/)
- Learn more about position HTML elements with [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)