Create an Animated VR Site With 30 Lines of Code
By: Mike Turck
Tags: Beginner Javascript, JavaScript, Virtual Reality, VR, HTML

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:

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.

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

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.

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:

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:

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: