Js instance

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

What does the Pointer Lock API do?

Pointer Lock API allows you to move the Pointer Lock Pointer Pointer Lock API allows you to move the Pointer Lock Pointer Pointer Lock API over and above the limits of your browser form.

This is useful for applications that require mouse control. For example: in a 3D VR girlfriend’s game, you move your mouse up and your view goes down.

In the default web environment, when you mouse over the top edge of the browser, you can’t go any further up, and as a result, you get stuck in a key place, which is very bad for the game experience.

However, if you use the Pointer Lock API, you don’t have this problem, the mouse can move around indefinitely, the coordinates can grow infinitely, completely out of the browser window, and you can enjoy the perfect immersive experience.

What are the API names for Pointer Lock API?

Currently, the Pointer Lock API supports 3 attributes, 2 methods, and 2 events as follows:

Three attributes
Document.pointerLockElement
Document.onpointerlockchange
Document.onpointerlockerror
Two methods
Element.requestPointerLock()
Document.exitPointerLock()
Two events
pointerlockchange
pointerlockerror

Among them, 2 events correspond to 2 attributes, so we actually need to know the following: Document. PointerLockElement and Element. RequestPointerLock (), Document.exitpointerlock () and pointerlockChange and Pointerlockerror events.

1. Document.pointerLockElement

Refers to the element on the current page that triggers infinite mouse scrolling, usually in the syntax:

var element = document.pointerLockElement;Copy the code

Returns a DOM element object, or null if the current page is not mouse-locked.

2. Element.requestPointerLock()

Can let the page into the mouse lock state (mouse directly disappear), the mouse unlimited scrolling, infinite changes in coordinates. The usual syntax is:

var element.requestPointerLock();Copy the code

3. Document.exitPointerLock()

To exit a page from the mouse-locked state, usually using the syntax:

document.exitPointerLock();Copy the code

By default, the browser supports the ESC key to exit the mouse lock, but users sometimes prefer to hit Cancel and so on, using document.exitPointerlock ().

4. Pointerlockchange events

Triggered when the page mouse lock status changes. Such as:

document.addEventListener('pointerlockchange', function () {
    // ...
}, false);Copy the code

5. Pointerlockerror events

Triggered when the page mouse lock fails. For example, when you try to lock more than one

Pointer Lock API image infinite 3D rotation JS instance

After reading the dry grammar instructions, let’s take a look at some vivid cases.

You can click here mercilessly: JS Pointer Lock with picture infinite 3D rotation demo

By default, you’ll see an average-looking girl and click on this image:

The mouse will instantly disappear and the image will start to flip around depending on where you mouse it, like this:

And the mouse’s range of motion seems to know no boundaries, so even after moving the width of 10,000 screens, our pictures are still flipping over and over. This is what the Pointer Lock API does.

The relevant codes are as follows:

<img id="image" src="mm1.jpg">Copy the code

JS:

var eleImage = document.getElementById('image'); If (eleImage) {var moveX = 0, moveY = 0; Var rotate3D = function (event) {moveX = moveX + event.movementx; moveY = moveY + event.movementY; eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg)'; }; / / triggers the mouse locking eleImage. AddEventListener (' click ', function () {eleImage. RequestPointerLock (); }); // Click the page again, Cancel the mouse locking up the document. The addEventListener (' click ', function () { if (document.pointerLockElement == eleImage) { document.exitPointerLock(); }}); / / detect where the mouse locking state change document. The addEventListener (' pointerlockchange ', function () { if (document.pointerLockElement == eleImage) { document.addEventListener("mousemove", rotate3D, false); } else { document.removeEventListener("mousemove", rotate3D, false); } }, false); }Copy the code

All the attributes and methods except the Pointerlockerror event are applied (see highlighted in red).

The principle is roughly as follows: . Click on the image, the execution eleImage requestPointerLock locked () let the page into the mouse, the trigger ‘pointerlockchange’ event, so, the mouse moves to the page binding method to alter the image rotation, in order to avoid repeat binding, We use the document. PointerLockElement determine the locked pages. Finally, to facilitate the unlocking of the page, we bind the click event to the page and unlock the page through document.exitPointerlock ().

Note: Event. movementX and event.movementY represent the horizontal and vertical position since the last move each time the Mousemove event is triggered, not a specific coordinate value. Therefore, the current moving position needs to be continuously added to the initial coordinates.

Fourth, concluding remarks

Finally, compatibility with Pointer Lock API.

Since the Pointer Lock API is mouse-related, it is not supported on all mobile devices because it is not necessary.

It is supported for desktop browsers, Chrome, Firefox, and Edge, and can now be used without a private prefix. IE doesn’t support it, but that doesn’t stop us from making enhancements to use the Pointer Lock API.

The above –

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

// Want a tip? Click here. Got something to say? Click here.

    Tags: API, exitPointerLock, Pointer-Events, PointerlockChange, pointerLockElement, requestPointerLock, mouse events