Note: The live code for this tutorial can be found here

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

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:

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

<a-light color="red"><a-light>

The code for the entire seen in only six lines of code and shown below:

  <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 to center everything inside of this overlay container.

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

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

<!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 is one of the best sites for quickly creating and sharing projects. Remix the code for this project here.

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 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
Learn more about position HTML elements with CSS Flexbox

Blog

Create An Animated VR Site With 30 Lines Of Code

Mike Turck