Overview

Zappar just released their universal AR SDK recently, which makes it really convenient for developers to access AR functionality while building custom web applications. This personal project is just to simply test their AR image tracking capability while also building a simple AR business card using Three JS. Fortunately, the click events are accurate compared to AR.JS so gesture based interactions is not needed.

Features

• Redirect links to LinkedIn, Twitter, Website
• Access to email, phone and whatsapp mesasge
• Playing AR video

The Tech Stack

Vanilla Javascript, THREE JS and Universal AR SDK from Zappar.

Deployment

To officially deploy the web application, you need a zappar account, so for this demonstration I just recorded a video from localhost.

Challenges

I had some challenges trying to do fade in and fade out animations as the AR visibility is toggled based on the marker visible or not visible event and using the visible attribute to show/hide the AR.