[SOLVED] Issues with pointer locking and camera rotation

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!

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?

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

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.

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.

1 Like

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?

1 Like

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 :thinking:

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?

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

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);

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

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;