Merge pull request #1352 from abow/master

fix for freeCamera pointer lock and fullscreen

dist/preview release/what's new.md

@@ -31,6 +31,7 @@
 ### API doc
 
 ### Bug fixes
+- Fixed issue with FreeCamera not working in fullscreen or when pointer locked ([abow](https://github.com/abow))
 - MapTexture: Font Characters are now correctly aligned on Chrome ([nockawa](https://github.com/nockawa))
 - Fixed some missing parameter default values in `MeshBuilder.CreateGroundFromHeightMap()` and `MeshBuilder.CreateTiledGround()` ([jerome](https://github.com/jbousquie))
 - Fixed cross vector calculation in `_computeHeightQuads()` that affected  all the `GroundMesh.getHeightAtCoordinates()` and `GroundMesh.getNormalAtCoordinates()` methods ([jerome](https://github.com/jbousquie))

src/Cameras/Inputs/babylon.freecamera.input.mouse.ts

@@ -6,9 +6,11 @@ module BABYLON {
         public angularSensibility = 2000.0;
 
         private _pointerInput: (p: PointerInfo, s: EventState) => void;
+        private _onMouseMove: (e: MouseEvent) => any;
         private _observer: Observer<PointerInfo>;
 
         private previousPosition: { x: number, y: number };
+        private _isPointerLock = false;
 
         constructor(public touchEnabled = true) {
         }
@@ -24,6 +26,12 @@ module BABYLON {
                         return;
                     }
 
+                    if (this._isPointerLock && !engine.isPointerLock) {
+						this.previousPosition = null;
+					}
+					
+					this._isPointerLock = engine.isPointerLock;
+
                     if (p.type === PointerEventTypes.POINTERDOWN) {
                         try {
                             evt.srcElement.setPointerCapture(evt.pointerId);
@@ -55,26 +63,19 @@ module BABYLON {
                     }
 
                     else if (p.type === PointerEventTypes.POINTERMOVE) {
-                        if (!this.previousPosition && !engine.isPointerLock) {
+                        if (!this.previousPosition || engine.isPointerLock) {
                             return;
                         }
 
-                        var offsetX;
-                        var offsetY;
-
-                        if (!engine.isPointerLock) {
-                            offsetX = evt.clientX - this.previousPosition.x;
-                            offsetY = evt.clientY - this.previousPosition.y;
-                        } else {
-                            offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
-                            offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
-                        }
-
+                        var offsetX = evt.clientX - this.previousPosition.x;
+                        var offsetY = evt.clientY - this.previousPosition.y;
+                        
                         if (this.camera.getScene().useRightHandedSystem) {
                             camera.cameraRotation.y -= offsetX / this.angularSensibility;
                         } else {
                             camera.cameraRotation.y += offsetX / this.angularSensibility;                            
                         }
+
                         camera.cameraRotation.x += offsetY / this.angularSensibility;
 
                         this.previousPosition = {
@@ -89,14 +90,44 @@ module BABYLON {
                 }
             }
 
+            this._onMouseMove = evt => {
+                if (!engine.isPointerLock) {
+                    return;
+                }
+
+                var offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
+                var offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
+
+                if (this.camera.getScene().useRightHandedSystem) {
+                    camera.cameraRotation.y -= offsetX / this.angularSensibility;
+                } else {
+                    camera.cameraRotation.y += offsetX / this.angularSensibility;                            
+                }
+                
+                camera.cameraRotation.x += offsetY / this.angularSensibility;
+
+                this.previousPosition = {
+                    x: evt.clientX,
+                    y: evt.clientY
+                };
+                
+                if (!noPreventDefault) {
+                    evt.preventDefault();
+                }
+            };
+
             this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE);
+            element.addEventListener("mousemove", this._onMouseMove, false);
+
         }
 
         detachControl(element: HTMLElement) {
             if (this._observer && element) {
                 this.camera.getScene().onPointerObservable.remove(this._observer);
-                this._observer = null;
+                element.removeEventListener("mousemove", this._onMouseMove);
 
+                this._observer = null;
+                this._onMouseMove = null;
                 this.previousPosition = null;
             }
         }