While navigating a model with threejs pointerlock controls, clicking on specific sections of the model directs users to different parts of the site. However, an issue arises when the camera is centered over a section and the user exits the pointerlock. Upon re-entering the pointerlock mode, not only is the mouse trapped, but the event handler is triggered, sending the user elsewhere.
To resolve this issue, the event handler needs to be removed. Despite attempting to do so in the code, it doesn't seem to work as intended. The following snippet defines the bounding box of the clickable area and attaches the listener:
for (var p = 0; p < panels.length; p++ ) {
// Relevant code block
}The specific section responsible for adding or removing the window listener is highlighted here:
if (controls.isLocked) {
console.log ('controls locked');
window.addEventListener( 'click', function () {
window.location.href = panels[p].url;
}, false );
} else {
console.log('controls unlocked');
window.removeEventListener( 'click', function () {
window.location.href = panels[p].url;
});
}The challenge lies in correctly invoking the removeEventListener. If I am doing it right, is there a way to ensure its proper functionality?