FutureCake FutureCake - 2 months ago 11
Javascript Question

exit pointerlockcontrols three.js not working

I have the following code to lock the cursor (this works fine):

var element = document.body;

var controls;
var instructions = document.getElementById( 'start' );
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;

if ( havePointerLock ) {


var pointerlockchange = function ( event ) {

if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {

controlsEnabled = true;
controls.enabled = true;

} else {

controlsEnabled = false;
controls.enabled = false;

instructions.style.display = '';

}

};

var pointerlockerror = function ( event ) {

instructions.style.display = '';

};

// Hook pointer lock state change events
document.addEventListener( 'pointerlockchange', pointerlockchange, false );
document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );

document.addEventListener( 'pointerlockerror', pointerlockerror, false );
document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );

instructions.addEventListener( 'click', function ( event ) {

instructions.style.display = 'none';

// Ask the browser to lock the pointer
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;

if ( /Firefox/i.test( navigator.userAgent ) ) {

document.addEventListener( 'fullscreenchange', fullscreenchange, false );
document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );

element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;

element.requestFullscreen();

} else {

element.requestPointerLock();

}

}, false );

} else {

instructions.innerHTML = 'Your browser doesn\'t seem to support my epic Portfolio';

}


when i run a function i want the pointerlockcontrols to be disabled so i can use my mouse again. so i tried the following:

function onDocumentMouseDown( event ) {

element.exitPointerLock;

}


this doesnt give me any errors but i also dont get my mouse back why is this?

when i try:

element.exitPointerLock();


i get element.exitPointerLock is not a function

so i dont know how to fix this :( any suggestions would be great if you need more code or a jsfiddle just ask me :)

Answer

so i figured it out :D i had to change:

element.exitPointerLock();

to:

document.exitPointerLock();

then it all works fine! hope this helps someone :)

Comments