[SOLVED] Issues with pointer locking and camera rotation

[Scottss]

Hey, peeps!

I’m having issues with the camera turning in my project, occasionally the camera will rotate half war around the character in my 3rd person camera mode. It seems like the cursor is hitting the edge of the window and looping over to the other side but if you console.log the pointer after it has been locked it seems that stays in the middle and sends values that are less than (+/-)10.

edit: I forgot to mention that the issues are only present on the X-axis.

this.eulers.x -= e.dx / 5;
this.eulers.y = pc.math.clamp(this.eulers.y += e.dy / 5 , -19, 45);

Link to project.

Above I’ve included the code that I found in the first person camera code to move the camera and a link to the project. Thank you!

[Leonidas]

Hi @Scottss,

This example is networked, nice job!

Though I don’t I am able to reproduce your issue. No matter how I rotate the camera the rotation behaves as expected.

Only when an item or another player is close by the camera will zoom really close to avoid entering that object. But that is to be expected right?

[Scottss]

That is correct, i took a video of what I am experiencing.

[Leonidas]

That’s funny, no matter how many times I rotate from the same perspective around the character it seems to be behaving here (tested on both firefox/chrome).

Though from your video, I’ve seen that before. I think it’s the limitation of when using euler angles that get converted back to quaternions.

Euler angle issue at 90° about x

I was using a plain entity as an pivot point. The issue seems to be applying successive rotations. Investigation shows Euler angles are reinterpreted as rotations about different axes (e.g. setLocalEulerAngles(0, -92, 0) becomes (180, -88, 180). I’ve worked around the problem by keeping track of the angles locally then applying that value rather than trying to increment the existing Euler angles. This was from a suggestion by yaustar’s from this thread (Understanding Euler rotation).

I don’t know if it works with your existing system but maybe a solution would be instead of using SetEulerAngles() to use rotate() directly. By applying directly the dx/dy rotation diff. I may be wrong though it may be something different.

[yaustar]

@Leonidas

Though from your video, I’ve seen that before. I think it’s the limitation of when using euler angles that get converted back to quaternions.

Hmm… as the OP is keeping track of the X/Y angle internally in the script, it shoudn’t be a problem

@Scottss do you have an browser extensions installed or software on the computer that could interfering with the mouse?

[yaustar]

Actually, are you testing this on a track pad? I vaguely remember a similar problem that was to do with hardware or software for said hardware.

Edit: I can’t reproduce the issue either on Windows with a mouse

[Scottss]

Hi Yaustar!

I tried on Mozilla with no add-on and chrome. I’m using a Logitech G903 so I don’t think its that. I logged the rotation just like the person @Leonidas mentioned above and experienced the same issue.

Do you know how @petemolineros’s issue was solved?

Understanding Euler rotation

Nah, I would just keep the rotation in eulers and store it locally in the entity script somewhere. The model viewer starter project/template does something similar as it has to deal with limits of pitch and rotation. Quaternions have several advantages over eulers, most notably not having gimbal local and applying multiple rotations is a lot easier. Some more information here: https://www.gamedev.net/resources/_/technical/math-and-physics/quaternion-powers-r1095

[yaustar]

@Scottss

Do you know how @petemolineros’s issue was solved?

They are using similar code to your project so I’m not sure what could be the issue as the code is correct.

[Cain_Quigley]

I have seen similar issues with rotation, using eulers. Sometimes, the X- and Z- axis will “flip” and both be 180 (or both back to 0), as you are rotating about the Y-axis. If you are only setting the X- and Y-axes (as in the code above), then you’ll only be correct part of the time.

Try using “rotate” instead of assigning eulers directly.

        this.camera.rotateLocal(eulers.x, 0, 0);
        this.camera.rotate( 0, eulers.y, 0);

[yaustar]

Could be related to this issue? https://www.html5gamedevs.com/topic/34516-pointer-lock-bug-on-chrome-with-windows-10/

[Scottss]

I restarted the project and used the following code without issue

if (pc.Mouse.isPointerLocked()) {
        this.eulers.x -= (this.mouseSensitivity * e.dx * deltaTime) % 360;
        this.eulers.y += (this.mouseSensitivity * e.dy * deltaTime) % 360;

        if (this.eulers.x < 0) this.eulers.x += 360;
        if (this.eulers.y < 0) this.eulers.y += 360;
}