catch the lockControls error when no user interaction

src/lib/Hero.js

@@ -15,8 +15,11 @@ class Hero{
     set cameraZ(v){
         this.#cameraZ = Math.min(Math.max(v, 1), 10);
         if (this.#cameraZ == 1){
-            this.#cameraZ = 0;
+            this.lockControls().then(()=>{
-            this.lockControls();
+                this.#cameraZ = 0;
+            }).catch(err=>{
+                console.log(err);
+            })
         }
     }
     
@@ -87,7 +90,7 @@ class Hero{
     }
 
     lockControls(){
-        this.pointerControls.controls.lock(true);
+        return this.pointerControls.lock(true);
     }
 
     update(delta){        

src/lib/PointerControls.js

@@ -4,6 +4,7 @@ import { PointerLockControls } from 'three/examples/jsm/Addons.js';
 class PointerControls {
     constructor(camera, hero, domElement) {
         this.kb = {};
+        this.dom = domElement;
 
         this.canJump = false;
         this.velocity = new Vector3();
@@ -115,6 +116,16 @@ class PointerControls {
     get running(){
         return this.moving && this.kb.ShiftLeft;
     }
+
+    async lock(unadjustedMovement = false){
+        await this.dom.requestPointerLock( {
+			unadjustedMovement
+		} );
+    }
+
+    unlock(){
+        this.dom.ownerDocument.exitPointerLock();
+    }
 }
 
 export { PointerControls };