Do I rotate an XR camera the right way?

Help & Support
1

I’m trying to recreate {the “walkabout” locomotion](https://youtu.be/pW6nlLV88Zk?t=15), which I somehow managed to in A-Frame.

It is about going back and forth from one end of your room to another and rotating the scene when you reach the virtual fence.

The code is on my Github and website

Here is what I did:

I took the XR picking example, made the camera a child of another entity as in the XR movement example :

            // create camera parent
            var cameraParent = new pc.Entity();
            app.root.addChild(cameraParent);

            // create camera
            var c = new pc.Entity();
            c.addComponent('camera', {
                clearColor: new pc.Color(44 / 255, 62 / 255, 80 / 255),
                farClip: 10000
            });
            cameraParent.addChild(c);

Then I added these two event listeners into the “if WebXR is supported” condition:

        app.xr.input.on("squeezeend", function() {
          rotationTrigger = 0;
        });
        app.xr.input.on("squeezestart", function() {
          rotationTrigger = 1;
          tmpVec3B = c.getLocalEulerAngles();
          oldCameraAngle = tmpVec3B.y;
        });

and this into app.on( "update", function() {} )

 if (rotationTrigger == 1) {
            tmpVec3A.copy(c.getLocalPosition());

            tmpVec3B = c.getLocalEulerAngles();

            angleDifference = oldCameraAngle - tmpVec3B.y;
            oldCameraAngle = tmpVec3B.y;

            cameraParent.translateLocal(tmpVec3A);
            cameraParent.rotateLocal(0, angleDifference, 0);
            cameraParent.translateLocal(tmpVec3A.scale(-1));
          
          }

It does rotate, but after about 90 degrees begins to do it funny.
I tried nonlocal Euler angles, quaternions - it’s just getting worse.
There is that comment in the code of the guy who helped me with A-Frame, which says “rotate the position” as opposed to “rotate the object” regarding the camera parent entity he called “rig”. What could be the equivalent of this in Playcanvas?

2

I’m not sure what the this.rig is in that code so I can’t advice.

The entities don’t store the Euler angles as-is. It’s actually stored in a matrix transformation and quaternion. This means that the Euler angles from getLocalEulerAngles(); are derived from a quaternion.

This means that each axis angle is limited from -180 to 180 and when it reaches certain thresholds, other axis angles are changed to compensate from the calculation

You can see it being done here as I rotate the object in the Editor.

Kapture 2021-02-01 at 09.12.57
Kapture 2021-02-01 at 09.12.57976×480 666 KB

The way I would do it in this case is to store the old forward direction, get the current forward direction. Flatten both on the Y axis and calculate the angle between them.

3

Done did as you said!
It worked.
Thank you very much!

1 Like