Gyroscope-controlled camera

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

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.

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

1 Like

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

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.

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?

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.

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