PointerLockControls - How is Unlimited Yaw Enabled?

I have created a “first person” camera rotater. Although the mouse cursor is invisible, the yaw seems to be limited by screen width, as if it is keeping track of where the mouse cursor is on the screen and stopping the mouse when the cursor gets to the edge of the screen.

Upon reviewing the code for PointerLockControls (PLC), I see that it does essentially the same thing I am trying to do, except that there is no limitation on yaw. This makes me think that the solution to my problem has to be something very basic.

Like PLC, I created an Event Listener for Mouse Move:
document.addEventListener(“mousemove”, onDocumentMouseMove, false);

Does it have to do with scope?

Thanks.

PointerLockControls uses browsers pointer lock API to get the behavior you’re talking about. You can see it initialized on this line:

So requestPointerLock() is a built in browser function? I didn’t know that. Very helpful.
Thanks!

Just a follow up for anyone who is interested.

I was able to successfully use PointerLock API by importing code from “misc_controls_pointerlock.html” and creating a revised version of “PointerLockControls.js” (“PointerLockControls.mod.js”).

I imported the following styles from PointerLock Controls.js:

#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

#instructions {
width: 100%;
height: 100%;

display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

color: #ffffff;
text-align: center;
font-family: Arial;
font-size: 14px;
line-height: 24px;

cursor: pointer;

}

(Or you can add the above styles to your css style file.)

I added the following initialization code to my program:

// Pointer Lock
var controls = new THREE.PointerLockControls(camera, document.body);
var blocker = document.getElementById(‘blocker’);
var instructions = document.getElementById(‘instructions’);
instructions.addEventListener(‘click’, function () {controls.lock();}, false);
controls.addEventListener( ‘lock’, function () {
instructions.style.display = ‘none’;
blocker.style.display = ‘none’;
});
controls.addEventListener( ‘unlock’, function () {
blocker.style.display = ‘block’;
instructions.style.display = ‘’;
});

I eliminated any competing MouseMove event listeners from my code.

Finally, I referenced my modified js code by inserting the following:

I then created the modified version of PointerLockControls.js. The biggest change was to replace the code in the MouseMove event reader with my code:

function onMouseMove( event ) {

if ( scope.isLocked === false ) return;

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

[INSERT YOUR REPLACEMENT CODE HERE]

scope.dispatchEvent( changeEvent );

}

Note that you do not have to use the mouse movement to rotate your camera, you can use it for whatever purpose you want. For example, I used the movement to orbit the camera around an object of interest.

Finally I eliminated any unused MouseMove-related variables and deleted other unused movement functions such as moveForward and moveRight and their related variables.

The result works perfectly with my program and did not take a lot of time to implement thanks to the existing code. I hope this is useful to others.

Phil