How to orbit around an object on Mobile, with "DeviceOrientationCamera"?

Questions
1

Hello, on mobile I should orbit around an object when the device is tilted (more or less as you move your mouse on desktop, with ArcRotateCamera).
I’ve looked to “DeviceOrientationCamera”, which is a great feature, but it seem to me that it work only for FreeCamera, that do the opposite.
Is there a way to implement such feature to get what I should realize?
Many thanks!!

2

We do not support this type of camera by default as far as I know but you could probably create it with custom inputs. @PolygonalSun is our camera GURU :slight_smile:

1 Like
3

I’m just start using BJS, so an help from Profile - PolygonalSun - Babylon.js would be great!
P.S. I think it would be nice for a new PR too :smiley:

4

Try taking a look at the ArcRotateCameraVROrientationInput class. I feel like this may be a good place to start. You can add the functionality by just adding the input to your ArcRotateCamera’s inputs:

var camera = new BABYLON.ArcRotateCamera(/*camera settings */);
// Need to have controls attached
camera.attachControl(canvas, true);
// Attach Orientation controls
camera.inputs.addVRDeviceOrientation();

If this doesn’t work for what you’re doing, your other option would be to either create a custom input class or manually handle device orientation.

1 Like
5

[quote=“DanieleSuppo, post:5, topic:25760, full:true”]

6

It’s a function that’s added to the ArcRotateCameraInputsManager by the arcRotateCameraVRDeviceOrientationInput.ts file. If it’s not showing up, I wonder if there’s an issue with it being imported. Just out of curiosity, how are you using Babylon.js (eg. via the Playground, a Typescript project, or by referencing the script directly)? There’s something that I’d like you to try. Does swapping out that errored line and using camera.inputs.add(new ArcRotateCameraVRDeviceOrientationInput()); work?

7

I’m using WebPack, and I’m importing each ES6 class.
In this case, for ArcRotateCamera I’m using

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { ArcRotateCameraVRDeviceOrientationInput } from "@babylonjs/core/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput";

Yes,

camera.inputs.add(new ArcRotateCameraVRDeviceOrientationInput())

does not give any error, but it doesn’t seem to work on mobile

8

I’ve did a PG, and it seem to work, at least the device orientation is detected but the camera rotation is quite wrong…

So, I’ve tried with the JS “deviceOrientation” and I’ve made another PG

Well, it seem to do the job!
I think it should need to be improved (ask for permission on iOS, avoid flip, remove noise, etc)
Here I’ve found another example, that see to work pretty well

but unfortunately I’m not so good with TS and React,
so any help on improve it would be great!!

1 Like
9

Interesting topic!

I assume this is supposed to work on mobile devices like iPhone and tablets? Just tried the last 2 playgrounds but the orientation isn’t controlled by the device orientation.

Is this supposed to work out is this an iOS issue? Thanks

10

I think there is now a special flag on ios devices to enable in order to make it work. [GE] Selection and Movement all in one! by msDestiny14 · Pull Request #11591 · BabylonJS/Babylon.js · GitHub

11

Hi @sebavan indeed that’s what I thought, however when loading this PG I don’t get a request for access to this data on my device.
If I go to the page linked above and turn on the device orientation data:

image
image1122×549 29.2 KB

I do get a request and it seems to work on that page, but not in the PG.

How can I resolve this?
Thanks
Pieter

12

@Cedric could you have a look ?

13

Sure! Let me take a look.

2 Likes
14

There’s a mistake in the function.
Use this one

function onClick() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        // Handle iOS 13+ devices.
        DeviceOrientationEvent.requestPermission()
            .then((state) => {
                if (state === 'granted') {
                    window.addEventListener('deviceorientation', handleOrientation);
                } else {
                    console.error('Request to access the orientation was rejected');
                }
            })
            .catch(console.error);
    } else {
        // Handle regular non iOS 13+ devices.
        window.addEventListener('deviceorientation', handleOrientation);
    }
}
3 Likes
15

Thanks I’ll try this later on, also will be able to use the device orientation in the future.

Cheers
Pieter