Adding hotspots to A-Frame 360° Experiences

This Annotated Reality Design for Novices project page describes how to use the project's hostpots.js script library to quickly create a medium-fidelity protoyping of an experience by adding and of three types of hotspots to a 360° experience created using the A-Frame web framework. The hotspots appear as circular icons and when the viewer brings one of them to the center of their field of view, one of three different types of boxes appears (and then disappears when the viewer looks away).

The library supports adding simple fact boxes, information boxes with a title and a bullet list of facts, and a photo box that can have captions above and/or below a small image. This library has been tested with version 0.7.0 of the aframe-master.js file (external link).

There is a function for creating each of the three types of hotspots. Within each, there are some mandatory parameters (such as the coordinates at which to position it, and some content information). The others (such as background and foreground color, and box size) can either be left out or have null passed in to have default values used. The functions are as follow (with optional parameters in brown):
    function insertSingleFactBox(coords, fact, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
    function insertSingleInfoBox(coords, heading, bullets, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
    function insertSinglePictureBox(coords, captionTop, image, captionBot, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
Note: For the insertSinglePictureBox method, the captionTop and captionBot parameters can be given as null if you do not want that type of caption for the image, but the image filename must be valid.

For example, this could be applied as:
    insertSingleFactBox("11 22", "Fact Box Example", 35, 10);
    insertSingleInfoBox("11 -22", "Info Box Title", [ "item #1", "item #2", "item #3", "item #4" ], 65, 25);
    insertSinglePictureBox("-11 -22", "Top Caption", "photo.jpg", "Bottom Caption", 50, 30);

You can see two simple example pages, each of which has the above examples live within it on a wireframe backdrop. One has the VR experience embedded within a webpage with other content, and the other is full-screen. Either can work on a smartphone in a "cardboard" VR headset with browsers such as Chrome and Firefox, and with an Oculus Rift if you load the page in a recent version of Firefox, by first clicking on the "goggles" icon in the lower right-hand corner to trigger a split view for VR.

We have also created a simple coordinate finder page that will allow you to edit it to specify the name of your equirectangular image (and the color of the display text) and then determine the coordinates of any spot in your image.

All of the above code and examples can be download in a single zip file here that can be put on a web server for exploration and use.

For more information about this project, please contact Evan Golub

Web Accessibility