NOTE: Building Interactivity in A-Frame

Published in

PROJECT REDBACK

4 min readAug 22, 2017

NOTE: 0010 — Tuesday 22 August 2017

PART 3

Having a web viewer for your models is fantastic, but what’s even better is adding a touch of interactivity in the scene and allow the user to become immersed in the experience!

Unlike 2D web, A-Frame allows you to do a whole bunch of actions through VR! These include:

“grab, throw, rub, flip, poke, stretch, press, etc.”

With regards to this web platform, I hope to achieve a sense of interaction with the objects in the scene. By clicking on the object, we can display a whole bunch of information about it. Even better if the data itself was referenced from another source!

PROCESS OF DEVELOPING THE SCENE:

STEP 1 — Create a script.js file

So far we’ve only got 1 script file in the Scripts Folder of the project. To limit the amount of code in our HTML whilst organising the file structure, we can create a script.js file to write our JavaScript and functionality of the scene.

In order for it to work, you must also reference the script.js file in script tags in the head of the HTML file:

<script src="js/script.js"></script>

STEP 2 — Name a component

What we’re trying to achieve in this process is to add another “Component” to our entities. A component is something we’ve already used in the previous post. They include:

Position
Scale
Colour
Rotation

However, the ones listed above are default and references A-Frame’s Script that we’ve originally loaded. This does make it a whole lot easier to just bring them out by calling on them. HOWEVER, if we have desires of creating our own custom components, then we have to build them from scratch by registering the components in separate scripts.

To do this we need to give the component a name. In this case, we’ll call it:

‘change-color-on-hover’

STEP 3 — Define the Schema of the Component

Within the script.js file we register the component, give it a name and define its schema :

AFRAME.registerComponent('change-color-on-hover', {
        schema: {
            // defines properties of the component
        },
        init: function() {
            // instructions go in here
        }
    });

Above is essentially the boilerplate template on how to put together a custom component for any entity in your A-Frame scene.

When thinking about what to include in the schema, you want to think about what part of the entity you want to affect. The one factor we aim to change is the colour, therefore we include it in the schema with a default value of #333:

schema: {
  color: (default: '#333'}
}

STEP 4 — Define the Variables of the Component’s Function

The init: function( ) { } is a function that is called once when the component is initialised. It is used to set up the initial state of the entity when it is run.

There are plenty of other functions you can include, such as:

init: function( ) { },
update: function( ) { },
tick: function( ) { },
remove: function( ) { },
pause: function( ) { },
play: function( ) { }

But for today, we will focus on the ‘init: function( ) { }’ as it is the most appropriate for the purpose.

In the ‘init: function( ) { }’, just like any JavaScript function you would define a set of variables used in the process. It’s slightly different in that there are some predefined variables to follow:

init: function() {
  var data = this.data;  // Component property values
  var el = this.el;      // Reference to the component's entity
  var defaultColor = el.getAttribute('material').color;
}};

We have access to the component via ‘this’.

These variables allow us to define the function and how each element will play a part in the process.

STEP 5— Define the Function of the Component

Within the function of the component, you can include 2D or in this case 3D events which allow for interaction with the entity within the scene. There are multiple events defined already that we can use:

click
fusing
mousedown
mouseenter
mouseleave
mouseup

We will be using two of them:

var defaultColor = el.getAttribute('material').color;
}};...el.addEventListener('click', function() {
    el.setAttribute('color', data.color);
});el.addEventListener('mouseleave', function() {
    el.setAttribute('color', defaultColor);
});...  }
}); // end of script

el — references the entity

addEventListener — continuously looks out for the action to happen. In the first case, it’s when the cursor intersect the entity

.addEventListener(eventName, function)

setAttribute — adds the attribute to the entity. In the first case, it’s the color specified in the entity’s component.

.setAttribute(componentName, data)

STEP 6 — Component in Action

Finally, in order for the component to work, you must add the component to the entity in the HTML file:

<a-entity><a-obj-model 
    src="#obj-1" 
    position="5 0 -15" 
    scale="0.001 0.001 0.001" 
    rotation="-90 0 -360" 
    color="#424B54"
    change-color-on-hover="color: #FFF00F"> // script.js Component
  </a-obj-model>
  ...
  <a-obj-model 
    src="#obj-25" 
    position="5 0 -15" 
    scale="0.001 0.001 0.001" 
    rotation="-90 0 -360" 
    color="#424B54"
    change-color-on-hover="color: #FFF00F"> // script.js Component
  </a-obj-model></a-entity>

STEP 6 — A-Frame Scene

Now within the scene, the cursor has the ability to interact with the entity and change its colour to the component’s desired colour!

The next post will follow on with interconnecting data to our objects and displaying them within the webpage!

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Tuesday 22 August 2017