requestPointerLock() documentation should note that it must be called from the user's callback

[jgordon510]

• [X ] Documentation

Details about the bug:

The page at https://p5js.org/reference/#/p5/requestPointerLock notes that "not all browsers support this feature." It should also note, however, that the feature requires being called in a user callback (a click or something) in most browsers. Chrome definitely requires it, similar to audiocontext.

[outofambit]

Hi @jgordon510, thanks for filing this! I hadn't heard this before but it could certainly be true since i think that API is still evolving.

However, I tried the example at https://p5js.org/reference/#/p5/requestPointerLock in Chrome (version 90.0.4430.72) and it worked fine. 😕 Does that example work for you in Chrome? (You should see the little sphere mesh rotate around when you move your mouse.

Thanks!

[jgordon510]

I think you misunderstand what pointerlock does: "You should see the little sphere mesh rotate around when you move your mouse." The example is moving because it's panning and tilting the camera by movedX and movedY respectively. It has nothing to do with the requestPointerLock(). As the description states: "The function requestPointerLock() locks the pointer to its current position and makes it invisible." This does not happen in the example. Here is that example without the requestPointerLock() that behaves exactly the same: ***@***.***/p5-template-39 (Here is an example with the requestPointerLock() in the same position as the example: ***@***.***/p5-template-40 ) Finally, here is an example with the requestPointerLock() working properly inside of mousePressed(): ***@***.***/p5-template-41 Be sure to click on the canvas itself to activate the pointerLock. You'll notice that, like the description says, the pointer disappears, and you must press escape (as your browser will tell you) for the pointer to come back. Here's more information on the PointerLock API: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API "The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for first person 3D games, for example."

…

On Sat, Apr 17, 2021, 7:47 PM evelyn masso ***@***.***> wrote: Hi @jgordon510 <https://github.com/jgordon510>, thanks for filing this! I hadn't heard this before but it could certainly be true since i think that API is still evolving. However, I tried the example at https://p5js.org/reference/#/p5/requestPointerLock in Chrome (version 90.0.4430.72) and it worked fine. 😕 Does that example work for you in Chrome? (You should see the little sphere mesh rotate around when you move your mouse. Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5191 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2DA63TPFOE7JOMIF5DCBDTJJB2NANCNFSM43DMVL5Q> .

[limzykenneth]

I can see this behaviour in Firefox as well. A note about needing user interaction in order to request pointer lock is probably needed in the documentation here and the example be edited to something like.

let cam;
function setup() {
  createCanvas(100, 100, WEBGL);
  cam = createCamera();
}

function draw() {
  background(255);
  cam.pan(-movedX * 0.001);
  cam.tilt(movedY * 0.001);
  sphere(25);
}

function mouseClicked(){
  requestPointerLock();
}

[stalgiag]

Yes, agree. I believe that this requirement wasn't in place when this example was made.