Stuck trying to launch AR scene


Just a small preface: I am very new not only to PlayCanvas but also to programming in general. So I am a complete beginner.

I am trying to launch an AR Scene when the user clicks/taps on the Box entity. I dug up the documentation page and this is the code I came up with:

// jshint esversion: 6

const Ar = pc.createScript('ar');

Ar.prototype.initialize = function () {
    const box ='Box');
    const camera ='Camera');
    console.log(box.button); // succesfully finds the Box entity.
    console.log(camera); // succesfully finds the Camera entity.
// desirable effect: when user clicks/taps on the button, the AR session starts and the message is logged into console.

// doesn't work...
    box.button.on('click', function() {, pc.XRTYPE_AR, pc.XRSPACE_LOCAL);
        console.log('AR session started');
    // doesn't work...
    box.on('click', function() {, pc.XRTYPE_AR, pc.XRSPACE_LOCAL);
        console.log('AR session started');
Ar.prototype.update = function (dt) {};

As you can see, I didn’t even get started and I’m already stuck. Would appreciate if you guys pointed out what I’m doing wrong.

Here is the link to the project augmented-reality-basics

Also, this is the final effect that I am trying to achieve

but first, you have to start somewhere… :frowning:

Just to check, does your phone and browser work with WebXR AR examples (eg

Here is a known working WebXR AR example too:

Look around the floor for a bit and then tap on the screen, it should place a grass mesh on the floor.

Thank you for your reply.

The first link works on my Phone and on my PC, I think… I can see a 3d space with planets and rocks and I can move the camera around however, there is a button/icon that says “AR Not Found”.

Was this supposed to happen?

The second link doesn’t seem to be working on my phone. I see a gray background with a black “AR” button. If I tap it, the button flashes, but besides that, nothing happens. There is no camera feed for me to look around.

Having said that, I forked and played with an 8th Wall Project:

and the AR works fine on my phone.

If that’s the case, your phone/browser combination is not compatible with WebXR AR experiences.

8th Wall uses their own AR library that is a lot more compatible with browsers and OSs. Whereas WebXR is not a standard yet.

As far as I know, only Chrome on Android is supported for WebXR AR immersive experiences. If you want to use 8th Wall libraries, you are best off starting on their site:

Thank you for your insight. I will check their docs and try to get started with something.