javascriptpointerlock

JS Pointer Lock

I'm having trouble with pointer Locking. My code looks something like this...

Canvas = document.createElement('canvas');
...(Parameters)...
document.body.appendChild(Canvas);

Canvas.requestPointerLock = Canvas.requestPointerLock ||
             element.mozRequestPointerLock ||
             element.webkitRequestPointerLock;

Canvas.requestPointerLock();

When I run my code nothing happens with the pointer lock (everything else run noramly). The code i showed is just what i think is relevant to the issue but if more code from my program is needed just tell me.

Solution

  • According to the WC3 Docs on pointerlock:

    requestPointerLock

    If a user has exited pointer lock via the default unlock user gesture, or pointer lock has not previously been entered for this document, an event generated as a result of an engagement gesture must be received by the document before requestPointerLock will succeed.

    It then talks about engagement gestures below.

    Engagement gesture

    An event generated by the user agent as a result of user interaction intended to interact with the page. e.g. click, but not mousemove. Engagement gestures are any events included in the definition of being allowed to show a popup with the addition of keypress and keyup.

    So in order for your code to work, requestPointerLock should be called from an engagement gesture, for example a click event handler.