Building a Simple Web VR UI with A-frame

A-frame is A set of libraries encapsulated by three.js that make it easy to build cross-platform Web VR applications. If you have no idea what it is and aren’t ready to read on, take A look at the official A-Frame example to see how it works and what it can do with it.

In this article, I will teach you how to create a VR site where you can experience switching between two 360° panoramas. To do this, we’ll use some A-frame specific code and A little JavaScript code.

First, we’ll create A basic HTML5 page and introduce the latest version of the A-Frame library into that page.



<script src="Https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script>Copy the code

The above link is no longer valid. It is best to search for A reference to the A-frame library

I’ve placed A complete A-frame example in Codepen for your reference.

Now that we have the basic shelf in place, we can start adding

tags to this shelf to construct our VR scene. The < A-scene > tag acts as a container for an A-frame project, filling it with graphics, cameras, images, videos, and various other components to build a VR scene. Next, we use it to create a simple red ball:



<a-scene>
 <a-sphere color="#F44336" radius="1" position="0 2 0"></a-sphere>
</a-scene>Copy the code

Now check it out on your browser or phone, and voila, you’ve got a VR scene!

Next, we’ll add a camera and cursor to “click” the sphere when our eyes land on it.

Set the fuse parameter to true so that when the A-frame listens for our eye resting on the sphere, the click event bound to the sphere will be executed.

The timeout parameter determines how many milliseconds to stare at the sphere before the event is activated.



<a-scene>
  <a-camera position="0 2 4">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>.</a-scene>Copy the code

We can extend our existing VR controls and use Javascript to write all kinds of custom functions, and these native controls and extension controls are collectively called “components” in the A-frame. Now we are going to bind a series of events to the sphere, so we can also call this sphere a sphere component. The next step is to formally code the sphere component so that when we stare at it, the entire VR background transforms.

Let’s not rush into writing the function that performs the background transformation. Let’s start by writing the following code. When eyes rest on the sphere and the click event is activated, we print a log in the browser console:



<script>
AFRAME.registerComponent('set-sky', {
  schema: {default: ' '},
  init() {
    this.el.addEventListener('click', () => {
      console.log(this.data); }); }});</script>Copy the code

The first parameter to the registerComponent method defines the name of the component, and the second parameter is an object containing a specific function. The object schema and init methods are all we need to do this, but there are several other parameters to this method that you can look up in the A-frame documentation at some point. This code binds the “click” event to the sphere and prints the sphere’s data property on the console. Setting default to an empty string in the schema means that this.data will be set to an empty string if no value is passed to the component when the event is fired.

In an A-frame, functional components are bound to components in the form of properties. We bind the set-sky component to the previously created sphere and initialize its data as a Hello string:

We will add the “Set sky” component to the sphere we created earlier and assign it the data “hello” :



<a-sphere set-sky="hello" color="#F44336" radius="1" position="0 2 0"></a-sphere>Copy the code

Now let’s pause on the sphere to activate the event, look at the console, and voila!

To set up a 360° panoramic image as a VR environment, we use an A-frame component labeled < A-Sky >. The component is actually a giant ball that wraps around the entire VR scene, and we provide it with an image as its internal texture. Now add the

tag to the scene, which will be textured later:



<a-sky></a-sky>Copy the code

Next we add another sphere for navigation to the scene and set different images as data parameters for the set-Sky function component. < a-Sky > requires a square projection image to display properly, so I found two such images on Flickr to use in this example:



<a-sphere color="# F44336" radius="1" position="- 4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere>
<a-sphere color="# FFEB3B" radius="1" position="4 2 0" set-sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-sphere>Copy the code

Finally, we adjust the set-sky component, which sets the data variable we passed to it to the address of the panorama image to be switched:



AFRAME.registerComponent('set-sky', {
  schema: {default: ' '},
  init() {
    const sky = document.querySelector('a-sky');

    this.el.addEventListener('click', () => {
      sky.setAttribute('src'.this.data); }); }});Copy the code

And you’re done! We now have an interactive VR app that has two panoramic backgrounds and can switch between them by looking at them. If your project doesn’t work, click on the source code in the Codepen or Gist preview to see for yourself what the problem is.