How to handle click events on AR.js

Updated Version — Showing AR content on a website is nice, but adding user interaction opens a completely new world of opportunities.

This is part of a series of articles about AR.js. The following is the list of the articles written so far:

• AR.js — The Simplest Way to get Cross-Browser Augmented Reality on the Web
• How to deliver AR on the web only with a QR Code
• How to handle click events on AR.js
• 10 tips to enhance your AR.js performances.

For the latest news about AR.js and Web AR, you can follow me!

Disclaimer: AR.js v3 is out, with a new Documentation that can be found at: https://ar-js-org.github.io/AR.js-Docs/. Learn more there if you found problems with this tutorial.

In the past articles I wrote about AR.js and the way we can deliver AR content only with a QR-Code. But what about interacting with 3D objects, that we can already show to the user? This will open a new world of applications for this wonderful technology.

A brief search on AR.js Github repository shows several event-related issues, most of them not solved. AR.js is built at the top of aframe and it’s not easy to understand how to handle simple events on 3D objects, i.e. click events.

I tried to collect all the working hints that I found and organize them into this article that comes with full working example of an user-interaction click.

So, let’s start!

Create the HTML entry point

As always, an AR.js app starts with an HTML file that defines markers, models, and so on. In this file, in order to handle events, we need to define additional properties on elements. Let’s see them in detail.

• At line 11, we import an external Javascript file used for setting the event handler. We’ll see it later in detail
• At line 21, our marker is defined with additional properties: markerhandler is used as the registered component name, while emitevents and cursor define the possibility to emit events, specifically mouse/touch based
• It’s important to define an id or adding a very specific CSS class in order to retrieve our marker and entity elements later.

Let’s see how our events.js file looks

The code is pretty self-explained: we register our component and, at the initialization, we add an event listener at ‘click’.

At line 10 I added an extra check: in fact, without that check events are firing multiple times, one for marker and one for entity. With this check we respond to an event only when cursorEl, our marker element, is visibile and is the element associated to the event.

Be aware that this approach is not perfect and not ‘production ready’.

• Clicks/touches are very sensible at the centre of the screen, less on the angles
• Click is not very reliable. Anyway, it can be very useful for simple interactions, like clicks for switch 3D models or clicks to start video, or something like that.

If you have to make an app that has click has core functionality, be aware of this limitations.

Here there’s a great explanation from a-frame official documentation about the complexity of handling clicks on 3D models, and why this is so challenging to achieve.

Anyway, with this approach you can add basic interaction to your AR.js app, and most of the times this is enough! Once inside the event listener you can do whatever you want; I make the 3D model growing bigger each click. You can surely do something more interesting and useful than that :)

Chialab is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people.

https://www.chialab.it.