Position camera DeviceOrientation and touch screen on mobile device

[Celga]

Hi,

I'm working on an application with bubbles and 360° images, which has been developped with Babylon Js.

This application must work either on PC or mobile and tablet device. Especially, I'm doing my tests on android devices.

On pc, All is working perfectly.

But, there is still a bug, on mobile device.

Indeed, I'm using a camera DeviceOrientation in case where the used device is an android device.
When I'm rotating the tablet, everything is ok. The scene rotates normally.

But, when I want to move my scene using touch with fingers, I have a problem. The scene rotates correctly but
when I stop touch, the position of camera doesn't stay at the right place. It is repositionned automatically at the
previous position, before the touch action.

I hope I'm understandable enough. (Sorry for my english).

I thank you in advance, if you have some potential solutions.

[GameMonetize]

Hello can you try with a simple TouchCamera to see if there is something wrong with DeviceOrientation?

[Celga]

Hello,

Thanks for your answer.
Yes, I tried to put a touchCamera instead of DeviceOrientation.
It's better, as regarding the problem I encounter. But, It's not as fluent when I move in my scene.

And the movement is more complicated.

I am wondering that it's possible to manage in the same time the deviceOrientation camera and the movement with touch fingers.

[GameMonetize]

It should work directly (like on PC)

are you using jquery PEP or hand.js for pointer event handling?

[Celga]

Hello Deltakosh,

I've embedded the files "hand.min-1.2.js" et "pep.js".

And otherwise, I use the event "touchstart", for pointer event handling.
Here is a slice of my code :

 var pickResult;
 var pickTouchResult;

 Startup();

 function Startup() {
        var myElts = document.getElementsByTagName("canvas")[0];

        myElts.addEventListener("touchstart", handleStart, false);
        /*myElts.addEventListener("touchend", handleEnd, false);
        myElts.addEventListener("touchcancel", handleCancel, false);
        myElts.addEventListener("touchleave", handleLeave, false);
        myElts.addEventListener("touchmove", handleMove, false);*/
    }

    function handleStart(evt) {

        evt.preventDefault();
          var el = document.getElementsByTagName("canvas")[0];
          var ctx = el.getContext("2d");

        pickTouchResult = scene.pick(scene.pointerX, scene.pointerY);

        actionsClickTouch(pickTouchResult); /* call of a function */

    }

[GameMonetize]

You cannot use both as they provide the same feature. And as I can see you are not using the camera default touch support?

[Celga]

Hi @Deltakosh,

thanks for your answer and sorry for my late reply.

Yes, I confirm you that I don't use a camera touch support.

These are the different cameras that I use :

var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0,1,0), scene);
var camera2 = new BABYLON.VRDeviceOrientationFreeCamera("WVR", new BABYLON.Vector3(0,1,0),scene);
var camera3 = new BABYLON.DeviceOrientationCamera("Mobile", new BABYLON.Vector3(0,1,0), scene);

So, I removed the call towards the file "pep.js".

I haven't had the possibility to do new trials on tablets, for now.

But, I'll get back to you certainly.

Thanks again.