Merge pull request #9029 from PolygonalSun/user/polygonalsun/mouse-to-pointer

Change use of mousemove to pointermove for Fly and Free camera mouse inputs

dist/preview release/what's new.md

@@ -323,6 +323,7 @@
 - Fix "Uncaught ReferenceError: name is not defined" ([outermeasure](https://github.com/outermeasure))
 - Fix wrong winding when applying a transform matrix on VertexData ([Popov72](https://github.com/Popov72))
 - Fix exporting vertex color of mesh with `StandardMaterial` when exporting to glTF ([Drigax](https://github.com/drigax))
+- Changed use of mousemove to pointermove in freeCameraMouseInput and flyCameraMouseInput to fix issue with Firefox ([PolygonalSun](https://github.com/PolygonalSun))
 
 ## Breaking changes
 - `FollowCamera.target` was renamed to `FollowCamera.meshTarget` to not be in conflict with `TargetCamera.target` ([Deltakosh](https://github.com/deltakosh))

src/Cameras/Inputs/flyCameraMouseInput.ts

@@ -59,7 +59,6 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
     @serialize()
     public angularSensibility = 1000.0;
 
-    private _mousemoveCallback: (e: MouseEvent) => void;
     private _observer: Nullable<Observer<PointerInfo>>;
     private _rollObserver: Nullable<Observer<Scene>>;
     private previousPosition: Nullable<{ x: number, y: number }> = null;
@@ -98,12 +97,6 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
                 }
             }
         );
-
-        // Helper function to keep 'this'.
-        this._mousemoveCallback = (e: any) => {
-            this._onMouseMove(e);
-        };
-        element.addEventListener("mousemove", this._mousemoveCallback, false);
     }
 
     /**
@@ -116,10 +109,6 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
 
             this.camera.getScene().onBeforeRenderObservable.remove(this._rollObserver);
 
-            if (this._mousemoveCallback) {
-                element.removeEventListener("mousemove", this._mousemoveCallback);
-            }
-
             this._observer = null;
             this._rollObserver = null;
             this.previousPosition = null;
@@ -184,6 +173,11 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
                 e.preventDefault();
                 this.element.focus();
             }
+
+            // This is required to move while pointer button is down
+            if (engine.isPointerLock) {
+                this._onMouseMove(p.event);
+            }
         } else
             // Mouse up.
             if (p.type === PointerEventTypes.POINTERUP && srcElement) {
@@ -202,7 +196,11 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
             } else
                 // Mouse move.
                 if (p.type === PointerEventTypes.POINTERMOVE) {
-                    if (!this.previousPosition || engine.isPointerLock) {
+                    if (!this.previousPosition) {
+                        if (engine.isPointerLock) {
+                            this._onMouseMove(p.event);
+                        }
+
                         return;
                     }
 

src/Cameras/Inputs/freeCameraMouseInput.ts

@@ -109,7 +109,11 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
                 }
 
                 else if (p.type === PointerEventTypes.POINTERMOVE) {
-                    if (!this.previousPosition || engine.isPointerLock) {
+                    if (!this.previousPosition) {
+                        if (engine.isPointerLock && this._onMouseMove) {
+                            this._onMouseMove(p.event);
+                        }
+
                         return;
                     }
 
@@ -161,7 +165,6 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
         };
 
         this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE);
-        element.addEventListener("mousemove", this._onMouseMove, false);
 
         element.addEventListener("contextmenu",
             <EventListener>this.onContextMenu.bind(this), false);
@@ -183,10 +186,6 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
         if (this._observer && element) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
 
-            if (this._onMouseMove) {
-                element.removeEventListener("mousemove", this._onMouseMove);
-            }
-
             if (this.onContextMenu) {
                 element.removeEventListener("contextmenu", <EventListener>this.onContextMenu);
             }