How to use PointerLock correctly for a first-person camera

This topic has 3 replies, 3 voices, and was last updated 2 years, 4 months ago by Ivan Lyubovnikov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2019-04-01 at 1:03 pm #13439
webgl
Customer
In RunCode() I write:
```
var container = document.getElementById('container');
container.addEventListener('click', function () {
  container.requestPointerLock();
}, false);
```
The cursor is captured, but the camera is not controlled by the mouse, I can only move from the keyboard. I don’t know what’s missing.

https://artdive.ru
2019-04-01 at 1:54 pm #13445
Yuri Kovelenov
Staff
After entering the PointerLock mode, you also need to move the camera according to mouse events:
```
function onMouseMove(event) {

    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

    ...
}
```
Alternatively, you can assign PointerLockControls to the camera, as shown in this demo: https://cdn.soft8soft.com/demo/examples/index.html?q=pointerlo#misc_controls_pointerlock

Chief 3D Verger | LinkedIn | Twitter
2019-04-01 at 3:05 pm #13450
webgl
Customer
Good, thanks:
```
        container.addEventListener("mousemove", onMouseMove, false);

        function onMouseMove(event) {

            var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
            var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

            app.camera.rotateX(-movementY/1000)
            app.camera.rotateY(-movementX/1000)

        }
```
https://artdive.ru
2021-12-09 at 1:22 pm #47832

Ivan Lyubovnikov
Staff

update: pointerlock is now supported natively in verge3d for first-person cameras. See more details here: https://www.soft8soft.com/topic/implementing-pointer-lock/#post-47831

Co-founder and lead developer at Soft8Soft.
Author

Posts