# Camera does a strange rotation on cursor lock

**URL:** <https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904>\
**Category:** Questions\
**Created:** [February 3, 2023, 1:08pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904 "2023-02-03T13:08:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [February 3, 2023, 1:08pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/1 "2023-02-03T13:08:50Z")

</div>

I am using cursor lock code when a mouse is pressed and display the cursor back when the mouse is released.

```auto
canvas.onpointerdown = () => {
    canvas.requestPointerLock();

};
canvas.onpointerup = () => {
    document.exitPointerLock();
};

```

I am using an example here - [https://playground.babylonjs.com/#GVPILZ#4](https://playground.babylonjs.com/#GVPILZ#4)

When you keep rotating the camera with mouse, at some point, the camera rotates rapidly to some other angle. This happens quite a number of times. It is related to the mouse lock/unlock.

Here is also a video demonstrating it - [2023-02-17 09-43-25](https://streamable.com/ibtxml)

How can i fix this?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 3, 2023, 3:51pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/2 "2023-02-03T15:51:54Z")

</div>

cc @PolygonalSun

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [February 6, 2023, 10:30am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/3 "2023-02-06T10:30:21Z")

</div>

I have reuploaded the video because it got expired. Please let me know if something is not clear.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 6, 2023, 11:10am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/4 "2023-02-06T11:10:27Z")

</div>

Assigned @PolygonalSun on February 6, 2023, 11:10am UTC



---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [February 6, 2023, 7:00pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/5 "2023-02-06T19:00:54Z")

</div>

I can take a look and see what’s going on.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [February 9, 2023, 10:57am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/6 "2023-02-09T10:57:56Z")

</div>

Hi again, was there any luck figuring out the issue?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 9, 2023, 11:31am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/7 "2023-02-09T11:31:10Z")

</div>

He is a bit full of tasks recently but he’ll look over this as soon as he can 😅

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [February 9, 2023, 4:12pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/8 "2023-02-09T16:12:42Z")

</div>

Sorry, I meant to update this yesterday. When I was looking at this, I was able to repro this by performing a quick flick action with the mouse. I haven’t found the root cause yet but I suspect that the behavior could be caused by the difference between how camera movement is handled when in and out of pointer lock. With pointer lock, the cursor absolute locaiton is not updated with each movement but the deltas (movementX/Y) are so we use that for movement. I’m currently digging into the code that checks for pointer lock to see if there might be some race issue. As far as a fix or workaround, nothing comes to mind but I’ll let you know when I find something.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [February 10, 2023, 8:35am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/9 "2023-02-10T08:35:34Z")

</div>

Thanks a lot for taking a look into this. Appreciate it.

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [February 16, 2023, 4:48pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/11 "2023-02-16T16:48:36Z")

</div>

I haven’t been able to figure it out yet but if you only need to rotate around a given point while in pointerlock, you could try removing the original pointerlock code and attachControl call and using a custom approach:

```auto
scene.onPointerObservable.add((eventData) => {
        const event = eventData.event;
        const type = eventData.type;

        switch(type) {
            case BABYLON.PointerEventTypes.POINTERDOWN:
                canvas.requestPointerLock();
                break;
            case BABYLON.PointerEventTypes.POINTERUP:
                document.exitPointerLock();
                break;
            case BABYLON.PointerEventTypes.POINTERMOVE:
                if (document.pointerLockElement === canvas && event.buttons >= 0) {
                    camera1.inertialAlphaOffset -= event.movementX / camera1.angularSensibilityX;
                    camera1.inertialBetaOffset -= event.movementY / camera1.angularSensibilityY;
                }
        }
    });

```

[Example in PG](https://playground.babylonjs.com/#GVPILZ#7)  
This might be a good alternative and eliminate the random back spinning.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [February 17, 2023, 8:44am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/12 "2023-02-17T08:44:51Z")

</div>

Thank you for your response and an alternate solution. I tested the PG but I am still facing the same problem.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [March 17, 2023, 12:47pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/13 "2023-03-17T12:47:23Z")

</div>

Pinging @PolygonalSun just for visibility

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [March 21, 2023, 5:04pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/14 "2023-03-21T17:04:26Z")

</div>

I found the root cause! Sorry that this took so long but this was a really evasive bug. So, the issue here is that we use the `pointerlockchange` event to update when we’re in a pointer lock. Unfortunately, this event fires AFTER `canvas.onpointerup` executes. Because of this, the pointerlock is released, as far as the browser is concerned and will report a new movement delta (movementX/Y) based off of the (now released) location. This is why there’s a massive movement it a different direction than expected.

I have a fix that I’m testing and if I can’t find any issues, I’ll go ahead and create a PR for it. I’ll let you know when that’s live.

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [March 21, 2023, 6:03pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/15 "2023-03-21T18:03:42Z")

</div>

PR is live: [Engine: Modified isPointerLock to update when called instead of during pointerlockchange event by PolygonalSun · Pull Request #13650 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/13650)

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [March 24, 2023, 1:42pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/16 "2023-03-24T13:42:28Z")

</div>

PR is merged

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [March 24, 2023, 1:42pm UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/17 "2023-03-24T13:42:31Z")

</div>

Unassigned @PolygonalSun on March 24, 2023, 1:42pm UTC



---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [April 12, 2023, 9:25am UTC](https://forum.babylonjs.com/t/camera-does-a-strange-rotation-on-cursor-lock/37904/18 "2023-04-12T09:25:33Z")

</div>

Thanks a lot for finding the problem and fixing it 🙂 Appreciate it.
