在 Jupyter notebook 中激活 pointerLock

Question

我目前正在尝试将 Pointer Lock API 用于 Jupyter 笔记本。基本上我想记录一堆触控板移动而不受屏幕尺寸的限制，然后将其传递给 Python 以对其进行一些计算。下面我只讲获取指针锁。

这是我的方法：我在当前笔记本的顶部创建一个新的 <div>，这样我就可以用它来锁定指针，我们称它为 canvas，然后调用 canvas.requestPointerLock(); .非常简单的东西。

我担心的是相同的代码（下面）在 a Javascript tester 中可以正常工作，但在 %%javascript 模式下的 Jupyter 单元格中却不行。

var canvas = document.getElementById('canvasPA');
if (canvas !== null && typeof(canvas) != 'undefined') {
    canvas.parentNode.removeChild(canvas);
}

/*
 *  Checking whether the web page can accommodate pointerLock
 */
var havePointerLock = 'pointerLockElement' in document
        || 'mozPointerLockElement' in document
        || 'webkitPointerLockElement' in document;
if (havePointerLock) {
    console.log("Document has pointer lock capabilities."); // >> True
}

/*
 *  Defining the canvasPA div
 */
if (canvas === null || typeof(canvas) == 'undefined') {
    console.log("New canvas.");
    canvas = document.createElement('div');
    canvas.id = 'canvasPA';
    canvas.style = 'position: absolute; top: 250px; left: 550px; '
            + 'width: 1000px; height: 400px; '
            + 'background-color: #00BB5511; z-index: 1000;';
    document.getElementsByTagName('body')[0].appendChild(canvas);
}

/*
 *  Defining the changePointerLock behavior. 
 *  When the lock is released, all listeners are removed, then canvasPA is 
 *  removed from the webpage.
 */
function changeCallback() {

    var pointerLockElement = document.pointerLockElement 
            || document.mozPointerLockElement 
            || document.webkitPointerLockElement;
    console.log( "pointerLockElement: " + pointerLockElement );

    if(pointerLockElement === canvas) {

        console.log('The pointer lock status is now locked onto canvas');

    } else {
        console.log('The pointer lock status is now unlocked');  

        // Removing all pointerLock-related listeners
        document.removeEventListener('pointerlockchange', changeCallback, false);
        document.removeEventListener('mozpointerlockchange', changeCallback, false);
        document.removeEventListener('webkitpointerlockchange', changeCallback, false);
        document.removeEventListener('pointerlockerror', errorCallback, false);
        document.removeEventListener('mozpointerlockerror', errorCallback, false);
        document.removeEventListener('webkitpointerlockerror', errorCallback, false);

        // Remove canvas from the notebook
        canvas = document.getElementById("canvasPA");
        if (canvas !== null 
                && typeof(canvas) != 'undefined' 
                && canvas.parentNode !== null) {
            canvas.parentNode.removeChild(canvas);
        }
    }
}

function errorCallback() {
    console.log("Error when attempting to lock cursor...");
}

document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
document.addEventListener('pointerlockerror', errorCallback, false);
document.addEventListener('mozpointerlockerror', errorCallback, false);
document.addEventListener('webkitpointerlockerror', errorCallback, false);

// Ask the browser to lock the pointer.
canvas.requestPointerLock = canvas.requestPointerLock 
        || canvas.mozRequestPointerLock 
        || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

使用 Javascript 测试仪我的控制台打印：

Document has pointer lock capabilities. New canvas. pointerLockElement: [object HTMLDivElement] The pointer lock status is now locked onto canvas

然后光标被锁定并消失。然后我按 Escape，控制台记录：

pointerLockElement: undefined The pointer lock status is now unlocked

但是，当我在 Jupyter 单元格中尝试完全相同的代码时，我得到：

Document has pointer lock capabilities. New canvas. Error when attempting to lock cursor...

并且光标永远不会被锁定。

似乎是 Jupyter notebook 中的某些东西阻止我获得锁，但我不能确定，因为 pointerlockerror 没有任何解释。有什么想法吗？

我正在使用 Chrome (64.0.3282.140)，Mac OS X 10.11.6.

非常感谢！

- 马蒂耶夫

Answer 1

因此，我设法使用之前对一个略有不同的问题的回答使其工作：

The problem is that requestPointerLock cannot be called automatically, it should be called from the user's callback

它对我有用，我现在从 mouseclick 回调中调用 requestPointerLock()。

很高兴我找到了解决方案，但我认为主要问题仍然存在：它如何在 "normal" javascript（参见原始问题）而不是在 Jupyter 单元中工作？我想这现在不那么重要了...

在 Jupyter notebook 中激活 pointerLock

Activate pointerLock in a Jupyter notebook

javascript

pointers

locking

pointerlock

jupyter