Simple device orientation


i had big stuggle getting WebVr to run.

Then i had a look into the code of WebVR Pollyfill,

github-webvr-pollyfill FusionPoseSensor.onDeviceOrientation()

They are using Quat.setFromEuler() with another axes order than playcanvas. First I copied the code and was a bit happy about a simple orientation. But i still thought, understanding the behavior would be much better than copy paste engineering :smiley:

What helped is to understand that setFromEuler is the same as calling setFromAxisAngle 3 times and multiplier the quaternions! Now the code is much more readable, and suddenly no magic number left.

here is the main part of my code

const LEFT90 = new pc.Quat().setFromAxisAngle(pc.Vec3.LEFT, 90);

function fromOrientation({ alpha, beta, gamma }, orientation) {
    const a = new pc.Quat().setFromAxisAngle(pc.Vec3.UP, alpha);
    const b = new pc.Quat().setFromAxisAngle(pc.Vec3.RIGHT, beta);
    const g = new pc.Quat().setFromAxisAngle(pc.Vec3.FORWARD, gamma);
    let rot = a.mul(b).mul(g).mul(LEFT90);
    if (orientation) {
        const dir = rot.transformVector(pc.Vec3.FORWARD);
        rot = new pc.Quat().setFromAxisAngle(dir, orientation)
   return rot;

complete class with orientation listener and crazy safari IOS code is in my project.
playcanvas - DustBust


Thank you sooo much @HellG - my mind was turning into a quaternion stew before I found you. Iā€™m creating a 3D room explorer on phone with device orientation controlling playcanvas camera and this has resolved my twist dilemma! :smiley:

1 Like