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