A-Frame: Getting Started

A-Frame Software Tutorial Introduction

 A-Frame is framework built on top of the WebVR API. WebVR is an experimental JavaScript application programming interface that provides support for virtual reality devices in a web browser. You can learn more about the WebVR API here. A-Frame is built for ease of use and is written right in HTML.

Note: WebVR is not supported by all browsers, if you run into unknown issues try are using Firefox or Edge. More information about bowser support for WebVR and A-Frame can be found here.

Glitch & Remixes

Glitch is an online code-editor that supports instant hosting and automated deployment. Glitch allows users to Remix a full, working app to personalize it for their needs. To complete this A-Frame tutorial I have provided a number of code snippets via Glitch for you to Remix! You can learn more about Glitch and Remixes here.

A-Frame Examples

• •  A-Frame Homepage

  • A-Frame Blog

Intro to the Basics

As previously mentioned, A-Frame can be developed in plain HTML without having to install anything. In this section we’ll go over a few basic principles of any A-Frame project. To get started in A-Frame we will remix on Glitch.

Upon opening you should see a scene populated with a green plane, a blue cube, and a yellow cylinder. In the bottom left corner of the window, select code, this is where we’ll make changes. Before making any changes, it is important to understand primitives. 

Primitives

A-Frame provides a handful of default elements such as <a-scene> and <a-box> called primitives that serve as a wrapper around the entity-component pattern A-Frame is built upon. These primitives make it that much easier to get up and running in A-Frame right away. Each primitive can then by modified further through the use of attributes such as position, rotation, and color.

Now that we understand primitives. Go ahead and make the following changes:

• • • Move the right by increasing the position's X value

    • Rotate the cylinder around the X axis so we see the bottom

    • Add <a-text> aligned in the center, necessary attribute values are:

      • value: ( e.g. "Hello")

      • color ( e.g. "#111")

      • position (e.g. "1 2 1")

      • align (e.g. "center")

If you run into trouble with any of these tasks try using the A-Frame Inspector, if you are still stuck there is a solution.html file included in the glitch for reference. 

The A-Frame Inspector

The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

•       Drag, rotate, and scale entities using handles and helpers

•       Tweak an entity’s components and their properties using widgets

•       Immediately see results from changing values without having to go back and forth between code and the browser

The Inspector is similar to the browser’s DOM inspector but tailored for 3D and A-Frame. We can toggle the Inspector to open up any A-Frame scene in the wild Let’s view source! To use the inspector hit: <ctrl> + <alt> + i on any A-Frame scene to open the visual editor. Go ahead and give this a try on the glitch example that you just edited. It should look something like this:

Cursor and Camera

There is no single way for adding interactions due to variety of platforms, devices, input methods that A-Frame can support. In this section we will go over the use of the cursor primitive for some simple interactions. The corresponding glitch for this section activity can be found here.

Just like the 2D Web, A-Frame relies on events and event listeners for interactivity and dynamically. A common misbelief is that we can add a click event listener to an A-Frame entity and expect it to work by directly clicking on the entity with our mouse. In WebGL, we must provide the input and interaction that provides such click events. For example, A-Frame’s cursor component creates a synthetic click event on gaze using a ray-caster.

To add gaze-based interaction, we need to add or implement a component. A-Frame comes with a cursor component that provides gaze-based interaction if attached to the camera:

• • 1. Within the <a-scene> explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.

    2.  Add <a-cursor> entity as a child element underneath the camera entity.

Should look something like this:

<a-scene>

  <a-camera>

    <a-cursor></a-cursor>

  </a-camera>

</a-scene>

Interactions

Great now when you refresh the application you should see a cursor following your gaze around the screen. Now we just have to add some basic interactions.

1. For each <a-box> primitive, set a new attribute: event-set__enter

2. Set the value of this attribute equal to: "_event: mouseenter; _target: #bg; color: #F44336"

3. For each box set the color in the attributes value to match the color of the box itself.

Awesome, now when we refresh the page, we have a fully interactive app with a cursor and interaction with primitives. Not bad!