What is a pointer lock and how can I use it?

Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen.

For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end.

Follow the steps below to utilize the mouse pointer lock in the web client for a PureWeb hosted 3D project, whether you are starting with the unmodified PureWeb client template or if you are upgrading an existing project.

Note: Ensure that you are using version 3.2.0 or higher of the PureWeb React web client, Platform SDK and React SDK.

Add Pointer Lock Parameters

To control pointer lock, open the client.json file of your React web client, and add the following parameters:

"usePointerLock":false,
"pointerLockRelease":false

Parameter Options

To control the pointer lock, the following options are available:

Disable pointer lock

"usePointerLock":false,
"pointerLockRelease":false

Enable lock, release on mouse up

"usePointerLock":true,
"pointerLockRelease":true

Enable lock, Escape to release

"usePointerLock":true,
"pointerLockRelease":false

Passing Properties via URL

You can also pass pointer lock properties into your web application via URL parameters:

https://your-url.com?usePointerLock=true&pointerLockRelease=false