似乎在尝试设置requestPointerLock()时出现了问题

7

我的代码似乎有些问题,但我无法确定是什么。我试图调用pointerlockchange API来禁用指针并使用鼠标作为FPS控制器。问题在于总是触发pointerlockerror,并且我收到一个“设置指针锁定时出错!”的消息。

该函数在$(document).ready内部调用。以下是代码:

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.');
}

}

1个回答

19

我自己找到了解决方案。问题在于requestPointerLock不能自动调用,它应该从用户的回调函数中调用,例如当单击某个东西时。


如果用户已经接受了全屏请求(https://w3c.github.io/pointerlock/),则可以直接调用`requestPointerLock()`。然而,我发现在Ubuntu上,FF和Chrome之间在后续对`exitPointerLock()`和`requestPointerLock()`的调用方面存在实现差异。FF的实现似乎更接近W3C规范。 - Paul

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接