Stuck trying to launch AR scene

Help & Support
1

Hello,

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 = this.app.root.findByName('Box');
    const camera = this.app.root.findByName('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() {
    this.app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCAL);
        console.log('AR session started');
        
    // doesn't work...
    box.on('click', function() {
    this.app.xr.start(camera, 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 https://8thwall.8thwall.app/placeground-aframe/.

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

2

Just to check, does your phone and browser work with WebXR AR examples (eg https://immersive-web.github.io/webxr-samples/immersive-ar-session.html)

Here is a known working WebXR AR example too: https://playcanvas.com/editor/scene/976117

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

3

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.

4

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.

5

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: https://www.8thwall.com/

6

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