Diagram from my Sketchbook showing how the web-page prototype will use buttons to achieve colour change on the objects in A-Frame

NOTE: Building Buttons for A-Frame

NOTE: 0013 — Wednesday 23 August 2017

PART 6

What we’ve been able to achieve is quite a feat! I find that connecting two completely different aspects of the web-page (2D elements speaking with 3D objects) to be an awesome challenge to tackle!

Let’s keep this going by creating buttons to have a purpose in changing the colour of the objects to blue in the scene!

PROCESS OF CREATING BUTTONS TO THE SCENE:

STEP 1 — Jump back into HTML

As you would with any 2D element, we’ll first create a div to store the button:

<div id="blue_btn">BLUE</div>

This will allow us to have a change in colour of the button when we hover on it with our cursor.

STEP 2 — Jump into CSS

Now we’ll give the button some visual properties:

#blue_btn {
    position: fixed;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid black;
    border-radius: 3px; // Rounds out the button
    cursor: pointer;
    display: block;
    font-family: sans-serif;
    left: 20px; // The location of the button is up to you
    top: 325px; // The location of the button is up to you
    background: white; // This is the colour before cursor interacts
    color: deepskyblue; // Text colour
}

To make it interactive in CSS, we can add properties to detect change:

• when our cursor hovers on the button
• when the button is active / clicked

#blue_btn:hover {
    background: #333;
    color: white;
}
        
#blue_btn:active {
    background: #035E7B;
}

STEP 3 — Interacting with our A-Frame Scene

Building on from our custom A-Frame component, we can add more functions as you would in JavaScript. Combining aspects of JQuery and setting attributes in A-Frame entities, we can start with defining the button’s variables:

var blueButton = $('#blue_btn');

So that we obtain the id of the button. Then underneath our ‘mouseleave’ function, we create a link between the click of the button and the change in colour of our objects in the scene:

blueButton.on('click', function () {
    el.setAttribute('color', '#035E7B');
});

Fantastic!

Problems with this Process

Even though it’s fantastic that we’ve been able to connect a button to create change to our scene, it doesn’t provide the ideal result because:

• It changes ALL of the objects within the scene, rather than the one that was selected. So technically, we haven’t SELECTED that actual object.
• When the cursor leaves the object it is hovering over, because of the way in which the code was written, it will revert back to its original colour

Ways of going about fixing this

• Possibly breaking the OBJ objects into individual entities, rather than all obj models in one <a-entity> tag
• Change that selected object’s colour, then store / update the button’s colour to the newest colour even when the cursor is removed
• Completely override the colour that is added to the object (remove the ‘mouseleave’ function altogether)

REFERENCES:

• https://www.w3schools.com/jquery/event_click.asp

© 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 Wednesday 23 August 2017