AR Business Card

The Brief Overview

Using AR.js to create an augmented reality business card profile.

The Features

• Touch dial to navigate AR menu
• Redirects to CTA

The Tech

Standard javascript, HTML and CSS was used to build this. Open source AR library AR.js was used for marker recognition and Aframe was used to build the AR components.

Challenges

Touch events does not work well with AR.js, therefore a dial system was used in combination with tap events to determine what to popup. There was also issues with anti-aliasing when AR components shared same/similar z depth (overlapping).

The aframe a-text also didn't work properly for a certain aframe version - I can't remember which.

As usual, due to the constant phone software upgrades and library updates, there were constant things being broken which made it a pain in the ass to keep it updated.

Demo Link

Scan the below QR code with your phone camera