尝试设置requestPointerLock()时似乎有些错误 [英] Seems something is wrong when trying to set requestPointerLock()
问题描述
在我的代码中看起来有些问题,但我无法弄清楚什么。我正在尝试调用pointerlockchange api来禁用指针并使用鼠标作为fps控制器。问题是始终 pointerlockerror 被触发,我得到一个错误设置指针锁!消息。
It seems something is wrong in my code, but I cannot figure what. I am trying to call pointerlockchange api to disable pointer and use mouse as fps controller. The problem is that always pointerlockerror is triggered and I get a Error setting pointer lock! message.
函数在 $(document).ready 中调用。下面是代码:
The function is called inside $(document).ready. Here's the code.:
function initLock() {
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
if ( havePointerLock ) {
var element = document.body;
console.log('Cathing element', element);
var pointerlockchange = function ( event ) {
if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
controls.enabled = true;
console.log('Pointer lock enabled!')
}
else {
controls.enabled = false;
}
}
var pointerlockerror = function ( event ) {
console.log('Error setting pointer lock!');
}
// 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 );
// Ask the browser to lock the pointer
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
if ( /Firefox/i.test( navigator.userAgent ) ) {
var fullscreenchange = function ( event ) {
if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
document.removeEventListener( 'fullscreenchange', fullscreenchange );
document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
element.requestPointerLock();
}
}
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();
}
}
else {
console.log('Sorry, pointer lock cannot be set.');
}
}
}
推荐答案
自己找到解决方案。问题是requestPointerLock不能被自动调用,它应该从用户的回调中被调用,例如,当点击某物时。
Found solution by myself. The problem is that requestPointerLock cannot be called automatically, it should be called from the user's callback, for example, when clicking on something.
这篇关于尝试设置requestPointerLock()时似乎有些错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!