Zap AR image target buttons not work in protrait mode

i am using zapper AR library and i have buttons in world space
so when the mobile device get in landscape mode
the click on buttons not work ,

Are the buttons the from the PlayCanvas UI system? If possible, can you share a simple project that showcases the issue with steps to reproduce the problem please?

thanks for reply
the buttons from playcanvas UI system
this is a simple project and this is the image target

so if the device is in protrait mode click on buttons works well ,
but when you rotate the device in landscape mode the buttons not work

even if i use a raycast to object it doesn’t work in landsacpe mode

That is weird, the orientation shouldn’t matter :thinking:

Does this happen without using Zappar (ie a normal browser app).

It might be related to any camera setup/changes that Zappar have made and perhaps the raycast is being done from the wrong camera?

Have you asked about this with Zappar support/community?

i’ve asked zapper about this issue but they didn’t response

I’ve had a look at this and it seems like they update the projection matrix of the camera. However, the screenToWorld operation requires other properties to be updated such as fov, aspectRatio etc as they are used for the function.

I’ve made a fix in zapparCamera.js here:

     * Override default camera's projection matrix with one provided by Zappar.
    const camera =;
    if (camera) { = (mat) => {
            const data =;
            camera.horizontalFov = false;
            camera.fov = (2.0 * Math.atan(1.0 / data[5]) * 180.0) / Math.PI;
            camera.aspectRatio = data[5] / data[0];
            camera.farClip = data[14] / (data[10] + 1);
            camera.nearClip = data[14] / (data[10] - 1);

Zappar will need to update their integration/example and I will try to contact them about this :slight_smile:

1 Like

thanks , this made my Day :smile:

i am facing new problem when trying to use scroll view in world space with zapper AR

it’s not work probably

there is an example in the same link

thanks for your support

What’s the problem?

using slider view doesn’t work probably

try this demo please

I’ve created a patch for the engine to enforce the elements when dragged not to move on their local Z axis

Copy the file patch-drag.js

And ensure that it is set to load after the engine.

I think the issue is that it if it is moving while being dragged, it causes issues on the raycasting and moves along the Z axis when it shouldn’t be allowed to do?

Created a bug report with a reproducible here:

1 Like