Gyroscope-controlled camera

Help & Support
1

I have a gyroscope-controlled camera on my new project here, and I was wondering how this works?

image
image1150×594 117 KB

2

Hello @leooooooo,

The VR Kit is a simple scene showcasing some of PlayCanvas’ VR capabilities, as well as providing a good starting point for building new VR projects. I encourage you to open it and play around with.

3

@leooooooo To add to @poliveira suggestion I found this post on the forum very useful.

1 Like
4

I want to invoke the gyroscope function in this VR kit for my own project, which is not VR. But I’m not quite sure how to call it

5

Hello @leooooooo,

I’m not entirely sure what function precisely you’d like to call, but I’m assuming you simply want to check the X, Y and Z rotations of the device. To do this, you need to first subscribe to the device orientation event:

window.addEventListener('deviceorientation', this.handleOrientation, true);

Then, simply add the function handleOrientation.

MyScript.prototype.handleOrientation = function (event) {
    var x = event.beta;
    var y = event.gamma;
    var z = event alpha;
};

If you run into issues, this page on the JS docs may be a good reference point, as it includes examples.

6

I can get the alpha,beta,gamma in playcanvas
But I’m not sure how to get that data to the camera,
how does the camera rotate based on this data?

7

The PlayCanvas camera can take X Y Z euler angles so you would need to find a formula that converts the phones alpha, beta and gamma angles into euler angles.

8

Is there any case I can refer to? No idea yet