remove HTMLElement from all camera and inputs

dist/preview release/what's new.md

@@ -55,6 +55,7 @@
 - Added noMipMap option to the photo dome construction process ([#8972](https://github.com/BabylonJS/Babylon.js/issues/8972)) ([RaananW](https://github.com/RaananW))
 - Add a `disableBoundingBoxesFromEffectLayer` property to the `EffectLayer` class to render the bounding boxes unaffected by the effect ([Popov72](https://github.com/Popov72))
 - Added `boundingBoxRenderer.onRessourcesReadyObservable` ([aWeirdo](https://github.com/aWeirdo))
+- Removed all references to HTML element from cameras' attach and detach control functions ([RaananW](https://github.com/RaananW))
 
 ### Engine
 

src/Behaviors/Meshes/pointerDragBehavior.ts

@@ -261,9 +261,9 @@ export class PointerDragBehavior implements Behavior<AbstractMesh> {
         if (this.detachCameraControls && this._attachedElement && this._scene.activeCamera && !this._scene.activeCamera.leftCamera) {
             if (this._scene.activeCamera.getClassName() === "ArcRotateCamera") {
                 const arcRotateCamera = this._scene.activeCamera as ArcRotateCamera;
-                arcRotateCamera.attachControl(this._attachedElement, arcRotateCamera.inputs ? arcRotateCamera.inputs.noPreventDefault : true, arcRotateCamera._useCtrlForPanning, arcRotateCamera._panningMouseButton);
+                arcRotateCamera.attachControl(arcRotateCamera.inputs ? arcRotateCamera.inputs.noPreventDefault : true, arcRotateCamera._useCtrlForPanning, arcRotateCamera._panningMouseButton);
             } else {
-                this._scene.activeCamera.attachControl(this._attachedElement, this._scene.activeCamera.inputs ? this._scene.activeCamera.inputs.noPreventDefault : true);
+                this._scene.activeCamera.attachControl(this._scene.activeCamera.inputs ? this._scene.activeCamera.inputs.noPreventDefault : true);
             }
         }
     }
@@ -318,9 +318,8 @@ export class PointerDragBehavior implements Behavior<AbstractMesh> {
 
             // Detatch camera controls
             if (this.detachCameraControls && this._scene.activeCamera && this._scene.activeCamera.inputs && !this._scene.activeCamera.leftCamera) {
-                if (this._scene.activeCamera.inputs.attachedElement) {
-                    this._attachedElement = this._scene.activeCamera.inputs.attachedElement;
-                    this._scene.activeCamera.detachControl(this._scene.activeCamera.inputs.attachedElement);
+                if (this._scene.activeCamera.inputs.attachedToElement) {
+                    this._scene.activeCamera.detachControl();
                 } else {
                     this._attachedElement = null;
                 }

src/Behaviors/Meshes/sixDofDragBehavior.ts

@@ -146,9 +146,8 @@ export class SixDofDragBehavior implements Behavior<Mesh> {
 
                     // Detatch camera controls
                     if (this.detachCameraControls && this._pointerCamera && !this._pointerCamera.leftCamera) {
-                        if (this._pointerCamera.inputs.attachedElement) {
-                            this._attachedElement = this._pointerCamera.inputs.attachedElement;
-                            this._pointerCamera.detachControl(this._pointerCamera.inputs.attachedElement);
+                        if (this._pointerCamera.inputs.attachedToElement) {
+                            this._pointerCamera.detachControl();
                         } else {
                             this._attachedElement = null;
                         }
@@ -166,7 +165,7 @@ export class SixDofDragBehavior implements Behavior<Mesh> {
 
                     // Reattach camera controls
                     if (this.detachCameraControls && this._attachedElement && this._pointerCamera && !this._pointerCamera.leftCamera) {
-                        this._pointerCamera.attachControl(this._attachedElement, true);
+                        this._pointerCamera.attachControl(true);
                     }
                     this.onDragEndObservable.notifyObservers({});
                 }
@@ -247,7 +246,7 @@ export class SixDofDragBehavior implements Behavior<Mesh> {
     public detach(): void {
         if (this._scene) {
             if (this.detachCameraControls && this._attachedElement && this._pointerCamera && !this._pointerCamera.leftCamera) {
-                this._pointerCamera.attachControl(this._attachedElement, true);
+                this._pointerCamera.attachControl(true);
             }
             this._scene.onPointerObservable.remove(this._pointerObserver);
         }

src/Cameras/Inputs/BaseCameraMouseWheelInput.ts

@@ -4,6 +4,7 @@ import { Observable, Observer } from "../../Misc/observable";
 import { Camera } from "../../Cameras/camera";
 import { ICameraInput } from "../../Cameras/cameraInputsManager";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
+import { Tools } from "../../Misc/tools";
 
 /**
  * Base class for mouse wheel input..
@@ -40,28 +41,29 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
     /**
      * Observable for when a mouse wheel move event occurs.
      */
-    public onChangedObservable = new Observable<
-        {wheelDeltaX: number, wheelDeltaY: number, wheelDeltaZ: number}>();
+    public onChangedObservable = new Observable<{ wheelDeltaX: number; wheelDeltaY: number; wheelDeltaZ: number }>();
 
     private _wheel: Nullable<(pointer: PointerInfo) => void>;
     private _observer: Nullable<Observer<PointerInfo>>;
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls
      *   should call preventdefault().
      *   (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+
         this._wheel = (pointer) => {
             // sanity check - this should be a PointerWheel event.
-            if (pointer.type !== PointerEventTypes.POINTERWHEEL) { return; }
+            if (pointer.type !== PointerEventTypes.POINTERWHEEL) {
+                return;
+            }
 
             const event = <MouseWheelEvent>pointer.event;
 
-            const platformScale =
-                event.deltaMode === WheelEvent.DOM_DELTA_LINE ? this._ffMultiplier : 1;
+            const platformScale = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? this._ffMultiplier : 1;
 
             if (event.deltaY !== undefined) {
                 // Most recent browsers versions have delta properties.
@@ -69,29 +71,19 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
                 // Chrome >=  v31  (Has WebGL >= v8)
                 // Edge >=    v12  (Has WebGl >= v12)
                 // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
-                this._wheelDeltaX +=
-                    this.wheelPrecisionX * platformScale * event.deltaX / this._normalize;
-                this._wheelDeltaY -=
-                    this.wheelPrecisionY * platformScale * event.deltaY / this._normalize;
-                this._wheelDeltaZ +=
-                    this.wheelPrecisionZ * platformScale * event.deltaZ / this._normalize;
+                this._wheelDeltaX += (this.wheelPrecisionX * platformScale * event.deltaX) / this._normalize;
+                this._wheelDeltaY -= (this.wheelPrecisionY * platformScale * event.deltaY) / this._normalize;
+                this._wheelDeltaZ += (this.wheelPrecisionZ * platformScale * event.deltaZ) / this._normalize;
             } else if ((<any>event).wheelDeltaY !== undefined) {
                 // Unsure whether these catch anything more. Documentation
                 // online is contradictory.
-                this._wheelDeltaX +=
-                    this.wheelPrecisionX * platformScale *
-                    (<any>event).wheelDeltaX / this._normalize;
-                this._wheelDeltaY -=
-                    this.wheelPrecisionY * platformScale *
-                    (<any>event).wheelDeltaY / this._normalize;
-                this._wheelDeltaZ +=
-                    this.wheelPrecisionZ * platformScale *
-                    (<any>event).wheelDeltaZ / this._normalize;
+                this._wheelDeltaX += (this.wheelPrecisionX * platformScale * (<any>event).wheelDeltaX) / this._normalize;
+                this._wheelDeltaY -= (this.wheelPrecisionY * platformScale * (<any>event).wheelDeltaY) / this._normalize;
+                this._wheelDeltaZ += (this.wheelPrecisionZ * platformScale * (<any>event).wheelDeltaZ) / this._normalize;
             } else if ((<any>event).wheelDelta) {
                 // IE >= v9   (Has WebGL >= v11)
                 // Maybe others?
-                this._wheelDeltaY -=
-                    this.wheelPrecisionY * (<any>event).wheelDelta / this._normalize;
+                this._wheelDeltaY -= (this.wheelPrecisionY * (<any>event).wheelDelta) / this._normalize;
             }
 
             if (event.preventDefault) {
@@ -101,16 +93,13 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
             }
         };
 
-        this._observer = this.camera.getScene().onPointerObservable.add(
-            this._wheel,
-            PointerEventTypes.POINTERWHEEL);
+        this._observer = this.camera.getScene().onPointerObservable.add(this._wheel, PointerEventTypes.POINTERWHEEL);
     }
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;
@@ -128,7 +117,7 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
         this.onChangedObservable.notifyObservers({
             wheelDeltaX: this._wheelDeltaX,
             wheelDeltaY: this._wheelDeltaY,
-            wheelDeltaZ: this._wheelDeltaZ
+            wheelDeltaZ: this._wheelDeltaZ,
         });
 
         // Clear deltas.

src/Cameras/Inputs/BaseCameraPointersInput.ts

@@ -42,8 +42,10 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
      * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         var engine = this.camera.getEngine();
+        const element = engine.getInputElement();
         var previousPinchSquaredDistance = 0;
         var previousMultiTouchPanPosition: Nullable<PointerTouch> = null;
 
@@ -115,7 +117,7 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
 
                 if (!noPreventDefault) {
                     evt.preventDefault();
-                    element.focus();
+                    element && element.focus();
                 }
             } else if (p.type === PointerEventTypes.POINTERDOUBLETAP) {
                 this.onDoubleTap(evt.pointerType);
@@ -225,7 +227,7 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
             this.onLostFocus();
         };
 
-        element.addEventListener("contextmenu",
+        element && element.addEventListener("contextmenu",
             <EventListener>this.onContextMenu.bind(this), false);
 
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
@@ -239,9 +241,8 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         if (this._onLostFocus) {
             let hostWindow = this.camera.getScene().getEngine().getHostWindow();
             if (hostWindow) {
@@ -251,12 +252,13 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
             }
         }
 
-        if (element && this._observer) {
+        if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;
 
             if (this.onContextMenu) {
-                element.removeEventListener("contextmenu", <EventListener>this.onContextMenu);
+                const inputElement = this.camera.getScene().getEngine().getInputElement();
+                inputElement && inputElement.removeEventListener("contextmenu", <EventListener>this.onContextMenu);
             }
 
             this._onLostFocus = null;

src/Cameras/Inputs/arcRotateCameraGamepadInput.ts

@@ -51,10 +51,8 @@ export class ArcRotateCameraGamepadInput implements ICameraInput<ArcRotateCamera
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
-     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(): void {
         let manager = this.camera.getScene().gamepadManager;
         this._onGamepadConnectedObserver = manager.onGamepadConnectedObservable.add((gamepad) => {
             if (gamepad.type !== Gamepad.POSE_ENABLED) {
@@ -78,7 +76,7 @@ export class ArcRotateCameraGamepadInput implements ICameraInput<ArcRotateCamera
      * Detach the current controls from the specified dom element.
      * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         this.camera.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.camera.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
         this.gamepad = null;

src/Cameras/Inputs/arcRotateCameraKeyboardMoveInput.ts

@@ -6,6 +6,7 @@ import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { Engine } from "../../Engines/engine";
 import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
+import { Tools } from '../../Misc/tools';
 
 /**
  * Manage the keyboard inputs to control the movement of an arc rotate camera.
@@ -85,10 +86,12 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        // was there a second variable defined?
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+
         if (this._onCanvasBlurObserver) {
             return;
         }
@@ -107,11 +110,7 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
                     this._ctrlPressed = evt.ctrlKey;
                     this._altPressed = evt.altKey;
 
-                    if (this.keysUp.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
-                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
-                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
-                        this.keysReset.indexOf(evt.keyCode) !== -1) {
+                    if (this.keysUp.indexOf(evt.keyCode) !== -1 || this.keysDown.indexOf(evt.keyCode) !== -1 || this.keysLeft.indexOf(evt.keyCode) !== -1 || this.keysRight.indexOf(evt.keyCode) !== -1 || this.keysReset.indexOf(evt.keyCode) !== -1) {
                         var index = this._keys.indexOf(evt.keyCode);
 
                         if (index === -1) {
@@ -124,13 +123,8 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
                             }
                         }
                     }
-                }
-                else {
-                    if (this.keysUp.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
-                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
-                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
-                        this.keysReset.indexOf(evt.keyCode) !== -1) {
+                } else {
+                    if (this.keysUp.indexOf(evt.keyCode) !== -1 || this.keysDown.indexOf(evt.keyCode) !== -1 || this.keysLeft.indexOf(evt.keyCode) !== -1 || this.keysRight.indexOf(evt.keyCode) !== -1 || this.keysReset.indexOf(evt.keyCode) !== -1) {
                         var index = this._keys.indexOf(evt.keyCode);
 
                         if (index >= 0) {
@@ -150,9 +144,8 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>) {
+    public detachControl() {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);
@@ -186,11 +179,9 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
                 } else if (this.keysUp.indexOf(keyCode) !== -1) {
                     if (this._ctrlPressed && this.camera._useCtrlForPanning) {
                         camera.inertialPanningY += 1 / this.panningSensibility;
-                    }
-                    else if (this._altPressed && this.useAltToZoom) {
+                    } else if (this._altPressed && this.useAltToZoom) {
                         camera.inertialRadiusOffset += 1 / this.zoomingSensibility;
-                    }
-                    else {
+                    } else {
                         camera.inertialBetaOffset -= this.angularSpeed;
                     }
                 } else if (this.keysRight.indexOf(keyCode) !== -1) {
@@ -202,11 +193,9 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
                 } else if (this.keysDown.indexOf(keyCode) !== -1) {
                     if (this._ctrlPressed && this.camera._useCtrlForPanning) {
                         camera.inertialPanningY -= 1 / this.panningSensibility;
-                    }
-                    else if (this._altPressed && this.useAltToZoom) {
+                    } else if (this._altPressed && this.useAltToZoom) {
                         camera.inertialRadiusOffset -= 1 / this.zoomingSensibility;
-                    }
-                    else {
+                    } else {
                         camera.inertialBetaOffset += this.angularSpeed;
                     }
                 } else if (this.keysReset.indexOf(keyCode) !== -1) {

src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts

@@ -5,6 +5,7 @@ import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 import { Scalar } from '../../Maths/math.scalar';
+import { Tools } from '../../Misc/tools';
 
 /**
  * Manage the mouse wheel inputs to control an arc rotate camera.
@@ -44,10 +45,11 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
     }
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        // was there a second variable defined?
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this._wheel = (p, s) => {
             //sanity check - this should be a PointerWheel event.
             if (p.type !== PointerEventTypes.POINTERWHEEL) { return; }
@@ -98,10 +100,9 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
-        if (this._observer && element) {
+    public detachControl(): void {
+        if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;
             this._wheel = null;

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -1,4 +1,3 @@
-import { Nullable } from "../../types";
 import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { ArcRotateCameraInputsManager } from "../../Cameras/arcRotateCameraInputsManager";
@@ -59,11 +58,12 @@ export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<Arc
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        this.camera.attachControl(element, noPreventDefault);
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+
+        this.camera.attachControl(noPreventDefault);
 
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
 
@@ -118,9 +118,8 @@ export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<Arc
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         window.removeEventListener("deviceorientation", this._deviceOrientationHandler);
     }
 

src/Cameras/Inputs/flyCameraKeyboardInput.ts

@@ -7,6 +7,7 @@ import { Engine } from "../../Engines/engine";
 import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
 import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math.vector";
+import { Tools } from '../../Misc/tools';
 
 /**
  * Listen to keyboard events to control the camera.
@@ -62,10 +63,10 @@ export class FlyCameraKeyboardInput implements ICameraInput<FlyCamera> {
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         if (this._onCanvasBlurObserver) {
             return;
         }
@@ -118,9 +119,8 @@ export class FlyCameraKeyboardInput implements ICameraInput<FlyCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/flyCameraMouseInput.ts

@@ -7,6 +7,7 @@ import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 import { Scene } from "../../scene";
 import { Quaternion } from "../../Maths/math.vector";
 import { Axis } from '../../Maths/math.axis';
+import { Tools } from '../../Misc/tools';
 /**
  * Listen to mouse events to control the camera.
  * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
@@ -75,11 +76,10 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
 
     /**
      * Attach the mouse control to the HTML DOM element.
-     * @param element Defines the element that listens to the input events.
      * @param noPreventDefault Defines whether events caught by the controls should call preventdefault().
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        this.element = element;
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this.noPreventDefault = noPreventDefault;
 
         this._observer = this.camera.getScene().onPointerObservable.add(
@@ -101,10 +101,9 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
-        if (this._observer && element) {
+    public detachControl(): void {
+        if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
 
             this.camera.getScene().onBeforeRenderObservable.remove(this._rollObserver);

src/Cameras/Inputs/followCameraKeyboardMoveInput.ts

@@ -6,6 +6,7 @@ import { Observer } from "../../Misc/observable";
 import { Engine } from "../../Engines/engine";
 import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
 import { Scene } from "../../scene";
+import { Tools } from '../../Misc/tools';
 
 /**
  * Manage the keyboard inputs to control the movement of a follow camera.
@@ -136,10 +137,10 @@ export class FollowCameraKeyboardMoveInput implements ICameraInput<FollowCamera>
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         if (this._onCanvasBlurObserver) {
             return;
         }
@@ -203,9 +204,8 @@ export class FollowCameraKeyboardMoveInput implements ICameraInput<FollowCamera>
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>) {
+    public detachControl() {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/followCameraMouseWheelInput.ts

@@ -4,6 +4,7 @@ import { EventState, Observer } from "../../Misc/observable";
 import { FollowCamera } from "../../Cameras/followCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
+import { Tools } from '../../Misc/tools';
 
 /**
  * Manage the mouse wheel inputs to control a follow camera.
@@ -52,10 +53,10 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this._wheel = (p, s) => {
             // sanity check - this should be a PointerWheel event.
             if (p.type !== PointerEventTypes.POINTERWHEEL) { return; }
@@ -117,10 +118,9 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
-        if (this._observer && element) {
+    public detachControl(): void {
+        if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;
             this._wheel = null;

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -127,10 +127,8 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
-     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(): void {
 
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
 
@@ -178,9 +176,8 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         window.removeEventListener("orientationchange", this._orientationChanged);
         window.removeEventListener("deviceorientation", this._deviceOrientation);
         this._alpha = 0;

src/Cameras/Inputs/freeCameraGamepadInput.ts

@@ -58,10 +58,8 @@ export class FreeCameraGamepadInput implements ICameraInput<FreeCamera> {
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
-     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(): void {
         let manager = this.camera.getScene().gamepadManager;
         this._onGamepadConnectedObserver = manager.onGamepadConnectedObservable.add((gamepad) => {
             if (gamepad.type !== Gamepad.POSE_ENABLED) {
@@ -88,9 +86,8 @@ export class FreeCameraGamepadInput implements ICameraInput<FreeCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         this.camera.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.camera.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
         this.gamepad = null;

src/Cameras/Inputs/freeCameraKeyboardMoveInput.ts

@@ -7,6 +7,7 @@ import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
 import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math.vector";
 import { Engine } from "../../Engines/engine";
+import { Tools } from '../../Misc/tools';
 /**
  * Manage the keyboard inputs to control the movement of a free camera.
  * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
@@ -61,10 +62,10 @@ export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         if (this._onCanvasBlurObserver) {
             return;
         }
@@ -118,9 +119,8 @@ export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/freeCameraMouseInput.ts

@@ -4,6 +4,7 @@ import { Nullable } from "../../types";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { FreeCamera } from "../../Cameras/freeCamera";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
+import { Tools } from "../../Misc/tools";
 /**
  * Manage the mouse inputs to control the movement of a free camera.
  * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
@@ -29,12 +30,12 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
     private _pointerInput: (p: PointerInfo, s: EventState) => void;
     private _onMouseMove: Nullable<(e: MouseEvent) => any>;
     private _observer: Nullable<Observer<PointerInfo>>;
-    private previousPosition: Nullable<{ x: number, y: number }> = null;
+    private previousPosition: Nullable<{ x: number; y: number }> = null;
 
     /**
      * Observable for when a pointer move event occurs containing the move offset
      */
-    public onPointerMovedObservable = new Observable<{ offsetX: number, offsetY: number }>();
+    public onPointerMovedObservable = new Observable<{ offsetX: number; offsetY: number }>();
     /**
      * @hidden
      * If the camera should be rotated automatically based on pointer movement
@@ -49,16 +50,17 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
         /**
          * Define if touch is enabled in the mouse input
          */
-        public touchEnabled = true) {
-    }
+        public touchEnabled = true
+    ) {}
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         var engine = this.camera.getEngine();
+        const element = engine.getInputElement();
 
         if (!this._pointerInput) {
             this._pointerInput = (p) => {
@@ -87,20 +89,19 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
 
                     this.previousPosition = {
                         x: evt.clientX,
-                        y: evt.clientY
+                        y: evt.clientY,
                     };
 
                     if (!noPreventDefault) {
                         evt.preventDefault();
-                        element.focus();
+                        element && element.focus();
                     }
 
                     // This is required to move while pointer button is down
                     if (engine.isPointerLock && this._onMouseMove) {
                         this._onMouseMove(p.event);
                     }
-                }
-                else if (p.type === PointerEventTypes.POINTERUP && srcElement) {
+                } else if (p.type === PointerEventTypes.POINTERUP && srcElement) {
                     try {
                         srcElement.releasePointerCapture(evt.pointerId);
                     } catch (e) {
@@ -111,9 +112,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
-                }
-
-                else if (p.type === PointerEventTypes.POINTERMOVE) {
+                } else if (p.type === PointerEventTypes.POINTERMOVE) {
                     if (!this.previousPosition) {
                         if (engine.isPointerLock && this._onMouseMove) {
                             this._onMouseMove(p.event);
@@ -124,18 +123,22 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
 
                     var offsetX = evt.clientX - this.previousPosition.x;
                     var offsetY = evt.clientY - this.previousPosition.y;
-                    if (this.camera.getScene().useRightHandedSystem) { offsetX *= -1; }
-                    if (this.camera.parent && this.camera.parent._getWorldMatrixDeterminant() < 0) { offsetX *= -1; }
+                    if (this.camera.getScene().useRightHandedSystem) {
+                        offsetX *= -1;
+                    }
+                    if (this.camera.parent && this.camera.parent._getWorldMatrixDeterminant() < 0) {
+                        offsetX *= -1;
+                    }
 
                     if (this._allowCameraRotation) {
                         this.camera.cameraRotation.y += offsetX / this.angularSensibility;
                         this.camera.cameraRotation.x += offsetY / this.angularSensibility;
                     }
-                    this.onPointerMovedObservable.notifyObservers({offsetX: offsetX, offsetY: offsetY});
+                    this.onPointerMovedObservable.notifyObservers({ offsetX: offsetX, offsetY: offsetY });
 
                     this.previousPosition = {
                         x: evt.clientX,
-                        y: evt.clientY
+                        y: evt.clientY,
                     };
 
                     if (!noPreventDefault) {
@@ -155,8 +158,12 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
             }
 
             var offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
-            if (this.camera.getScene().useRightHandedSystem) { offsetX *= -1; }
-            if (this.camera.parent && this.camera.parent._getWorldMatrixDeterminant() < 0) { offsetX *= -1; }
+            if (this.camera.getScene().useRightHandedSystem) {
+                offsetX *= -1;
+            }
+            if (this.camera.parent && this.camera.parent._getWorldMatrixDeterminant() < 0) {
+                offsetX *= -1;
+            }
             this.camera.cameraRotation.y += offsetX / this.angularSensibility;
 
             var offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
@@ -171,8 +178,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
 
         this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE);
 
-        element.addEventListener("contextmenu",
-            <EventListener>this.onContextMenu.bind(this), false);
+        element && element.addEventListener("contextmenu", <EventListener>this.onContextMenu.bind(this), false);
     }
 
     /**
@@ -185,14 +191,15 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
-        if (this._observer && element) {
+    public detachControl(): void {
+        if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
 
             if (this.onContextMenu) {
-                element.removeEventListener("contextmenu", <EventListener>this.onContextMenu);
+                const engine = this.camera.getEngine();
+                const element = engine.getInputElement();
+                element && element.removeEventListener("contextmenu", <EventListener>this.onContextMenu);
             }
 
             if (this.onPointerMovedObservable) {

src/Cameras/Inputs/freeCameraTouchInput.ts

@@ -5,6 +5,7 @@ import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManage
 import { FreeCamera } from "../../Cameras/freeCamera";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 import { Matrix, Vector3 } from "../../Maths/math.vector";
+import { Tools } from "../../Misc/tools";
 /**
  * Manage the touch inputs to control the movement of a free camera.
  * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
@@ -33,7 +34,7 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
     private _offsetY: Nullable<number> = null;
 
     private _pointerPressed = new Array<number>();
-    private _pointerInput: (p: PointerInfo, s: EventState) => void;
+    private _pointerInput?: (p: PointerInfo, s: EventState) => void;
     private _observer: Nullable<Observer<PointerInfo>>;
     private _onLostFocus: Nullable<(e: FocusEvent) => any>;
 
@@ -46,16 +47,16 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
         /**
          * Define if mouse events can be treated as touch events
          */
-        public allowMouse = false) {
-    }
+        public allowMouse = false
+    ) {}
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        var previousPosition: Nullable<{ x: number, y: number }> = null;
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+        var previousPosition: Nullable<{ x: number; y: number }> = null;
 
         if (this._pointerInput === undefined) {
             this._onLostFocus = () => {
@@ -72,7 +73,6 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
                 }
 
                 if (p.type === PointerEventTypes.POINTERDOWN) {
-
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -85,11 +85,9 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
 
                     previousPosition = {
                         x: evt.clientX,
-                        y: evt.clientY
+                        y: evt.clientY,
                     };
-                }
-
-                else if (p.type === PointerEventTypes.POINTERUP) {
+                } else if (p.type === PointerEventTypes.POINTERUP) {
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -107,9 +105,7 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
                     previousPosition = null;
                     this._offsetX = null;
                     this._offsetY = null;
-                }
-
-                else if (p.type === PointerEventTypes.POINTERMOVE) {
+                } else if (p.type === PointerEventTypes.POINTERMOVE) {
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -133,7 +129,9 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
         this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE);
 
         if (this._onLostFocus) {
-            element.addEventListener("blur", this._onLostFocus);
+            const engine = this.camera.getEngine();
+            const element = engine.getInputElement();
+            element && element.addEventListener("blur", this._onLostFocus);
         }
     }
 
@@ -141,15 +139,17 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
      * Detach the current controls from the specified dom element.
      * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
-        if (this._pointerInput && element) {
+    public detachControl(): void {
+        if (this._pointerInput) {
             if (this._observer) {
                 this.camera.getScene().onPointerObservable.remove(this._observer);
                 this._observer = null;
             }
 
             if (this._onLostFocus) {
-                element.removeEventListener("blur", this._onLostFocus);
+                const engine = this.camera.getEngine();
+                const element = engine.getInputElement();
+                element && element.removeEventListener("blur", this._onLostFocus);
                 this._onLostFocus = null;
             }
             this._pointerPressed = [];
@@ -177,7 +177,7 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
             camera.cameraRotation.x = -this._offsetY / this.touchAngularSensibility;
         } else {
             var speed = camera._computeLocalCameraSpeed();
-            var direction = new Vector3(0, 0, speed * this._offsetY / this.touchMoveSensibility);
+            var direction = new Vector3(0, 0, (speed * this._offsetY) / this.touchMoveSensibility);
 
             Matrix.RotationYawPitchRollToRef(camera.rotation.y, camera.rotation.x, 0, camera._cameraRotationMatrix);
             camera.cameraDirection.addInPlace(Vector3.TransformCoordinates(direction, camera._cameraRotationMatrix));

src/Cameras/Inputs/freeCameraVirtualJoystickInput.ts

@@ -1,5 +1,4 @@
 import { VirtualJoystick, JoystickAxis } from "../../Misc/virtualJoystick";
-import { Nullable } from "../../types";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { FreeCamera } from "../../Cameras/freeCamera";
 import { Matrix, Vector3 } from "../../Maths/math.vector";
@@ -78,10 +77,8 @@ export class FreeCameraVirtualJoystickInput implements ICameraInput<FreeCamera>
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
-     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(): void {
         this._leftjoystick = new VirtualJoystick(true);
         this._leftjoystick.setAxisForUpDown(JoystickAxis.Z);
         this._leftjoystick.setAxisForLeftRight(JoystickAxis.X);
@@ -96,9 +93,8 @@ export class FreeCameraVirtualJoystickInput implements ICameraInput<FreeCamera>
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: Nullable<HTMLElement>): void {
+    public detachControl(): void {
         this._leftjoystick.releaseCanvas();
         this._rightjoystick.releaseCanvas();
     }

src/Cameras/VR/vrExperienceHelper.ts

@@ -787,7 +787,7 @@ export class VRExperienceHelper {
 
             this._scene.activeCamera = this._deviceOrientationCamera;
             if (this._inputElement) {
-                this._scene.activeCamera.attachControl(this._inputElement);
+                this._scene.activeCamera.attachControl();
             }
         } else {
             this._existingCamera = this._scene.activeCamera;
@@ -1180,7 +1180,7 @@ export class VRExperienceHelper {
         }
 
         if (this._scene.activeCamera && this._inputElement) {
-            this._scene.activeCamera.attachControl(this._inputElement);
+            this._scene.activeCamera.attachControl();
         }
 
         if (this._interactionsEnabled) {
@@ -1248,7 +1248,7 @@ export class VRExperienceHelper {
                 this._existingCamera.position = this._position;
                 this._scene.activeCamera = this._existingCamera;
                 if (this._inputElement) {
-                    this._scene.activeCamera.attachControl(this._inputElement);
+                    this._scene.activeCamera.attachControl();
                 }
 
                 // Restore angular sensibility

src/Cameras/VR/webVRCamera.ts

@@ -21,6 +21,7 @@ import "../RigModes/webVRRigMode";
 
 // Side effect import to add webvr support to engine
 import "../../Engines/Extensions/engine.webVR";
+import { Tools } from '../../Misc/tools';
 
 Node.AddNodeConstructor("WebVRFreeCamera", (name, scene) => {
     return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
@@ -481,11 +482,10 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
         }
     }
 
-    private _htmlElementAttached: Nullable<HTMLElement> = null;
     private _detachIfAttached = () => {
         var vrDisplay = this.getEngine().getVRDevice();
-        if (vrDisplay && !vrDisplay.isPresenting && this._htmlElementAttached) {
-            this.detachControl(this._htmlElementAttached);
+        if (vrDisplay && !vrDisplay.isPresenting) {
+            this.detachControl();
         }
     }
 
@@ -495,13 +495,12 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
      * within a user-interaction callback. Example:
      * <pre> scene.onPointerDown = function() { camera.attachControl(canvas); }</pre>
      *
-     * @param element html element to attach the vrDevice to
      * @param noPreventDefault prevent the default html element operation when attaching the vrDevice
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        super.attachControl(element, noPreventDefault);
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+        super.attachControl(noPreventDefault);
         this._attached = true;
-        this._htmlElementAttached = element;
 
         noPreventDefault = Camera.ForceAttachControlToAlwaysPreventDefault ? false : noPreventDefault;
 
@@ -518,14 +517,12 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
 
     /**
      * Detaches the camera from the html element and disables VR
-     *
-     * @param element html element to detach from
      */
-    public detachControl(element: HTMLElement): void {
+    public detachControl(): void {
         this.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
 
-        super.detachControl(element);
+        super.detachControl();
         this._attached = false;
         this.getEngine().disableVR();
         window.removeEventListener('vrdisplaypresentchange', this._detachIfAttached);

src/Cameras/arcRotateCamera.ts

@@ -15,7 +15,8 @@ import { ArcRotateCameraPointersInput } from "../Cameras/Inputs/arcRotateCameraP
 import { ArcRotateCameraKeyboardMoveInput } from "../Cameras/Inputs/arcRotateCameraKeyboardMoveInput";
 import { ArcRotateCameraMouseWheelInput } from "../Cameras/Inputs/arcRotateCameraMouseWheelInput";
 import { ArcRotateCameraInputsManager } from "../Cameras/arcRotateCameraInputsManager";
-import { Epsilon } from '../Maths/math.constants';
+import { Epsilon } from "../Maths/math.constants";
+import { Tools } from "../Misc/tools";
 
 declare type Collider = import("../Collisions/collider").Collider;
 
@@ -757,25 +758,21 @@ export class ArcRotateCamera extends TargetCamera {
             return false;
         }
 
-        return this._cache._target.equals(this._getTargetPosition())
-            && this._cache.alpha === this.alpha
-            && this._cache.beta === this.beta
-            && this._cache.radius === this.radius
-            && this._cache.targetScreenOffset.equals(this.targetScreenOffset);
+        return this._cache._target.equals(this._getTargetPosition()) && this._cache.alpha === this.alpha && this._cache.beta === this.beta && this._cache.radius === this.radius && this._cache.targetScreenOffset.equals(this.targetScreenOffset);
     }
 
     /**
      * Attached controls to the current camera.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
      * @param panningMouseButton Defines whether panning is allowed through mouse click button
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean, useCtrlForPanning: boolean = true, panningMouseButton: number = 2): void {
+    public attachControl(noPreventDefault?: boolean, useCtrlForPanning: boolean = true, panningMouseButton: number = 2): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this._useCtrlForPanning = useCtrlForPanning;
         this._panningMouseButton = panningMouseButton;
 
-        this.inputs.attachElement(element, noPreventDefault);
+        this.inputs.attachElement(noPreventDefault);
 
         this._reset = () => {
             this.inertialAlphaOffset = 0;
@@ -789,10 +786,9 @@ export class ArcRotateCamera extends TargetCamera {
     /**
      * Detach the current controls from the camera.
      * The camera will stop reacting to inputs.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: HTMLElement): void {
-        this.inputs.detachElement(element);
+    public detachControl(): void {
+        this.inputs.detachElement();
 
         if (this._reset) {
             this._reset();
@@ -810,9 +806,15 @@ export class ArcRotateCamera extends TargetCamera {
         // Inertia
         if (this.inertialAlphaOffset !== 0 || this.inertialBetaOffset !== 0 || this.inertialRadiusOffset !== 0) {
             let inertialAlphaOffset = this.inertialAlphaOffset;
-            if (this.beta <= 0) { inertialAlphaOffset *= -1; }
-            if (this.getScene().useRightHandedSystem) { inertialAlphaOffset *= -1; }
-            if (this.parent && this.parent._getWorldMatrixDeterminant() < 0) { inertialAlphaOffset *= -1; }
+            if (this.beta <= 0) {
+                inertialAlphaOffset *= -1;
+            }
+            if (this.getScene().useRightHandedSystem) {
+                inertialAlphaOffset *= -1;
+            }
+            if (this.parent && this.parent._getWorldMatrixDeterminant() < 0) {
+                inertialAlphaOffset *= -1;
+            }
             this.alpha += inertialAlphaOffset;
 
             this.beta += this.inertialBetaOffset;
@@ -852,11 +854,10 @@ export class ArcRotateCamera extends TargetCamera {
                 if (this.panningDistanceLimit) {
                     this._transformedDirection.addInPlace(this._target);
                     var distanceSquared = Vector3.DistanceSquared(this._transformedDirection, this.panningOriginTarget);
-                    if (distanceSquared <= (this.panningDistanceLimit * this.panningDistanceLimit)) {
+                    if (distanceSquared <= this.panningDistanceLimit * this.panningDistanceLimit) {
                         this._target.copyFrom(this._transformedDirection);
                     }
-                }
-                else {
+                } else {
                     this._target.addInPlace(this._transformedDirection);
                 }
             }
@@ -881,7 +882,7 @@ export class ArcRotateCamera extends TargetCamera {
     protected _checkLimits() {
         if (this.lowerBetaLimit === null || this.lowerBetaLimit === undefined) {
             if (this.allowUpsideDown && this.beta > Math.PI) {
-                this.beta = this.beta - (2 * Math.PI);
+                this.beta = this.beta - 2 * Math.PI;
             }
         } else {
             if (this.beta < this.lowerBetaLimit) {
@@ -891,7 +892,7 @@ export class ArcRotateCamera extends TargetCamera {
 
         if (this.upperBetaLimit === null || this.upperBetaLimit === undefined) {
             if (this.allowUpsideDown && this.beta < -Math.PI) {
-                this.beta = this.beta + (2 * Math.PI);
+                this.beta = this.beta + 2 * Math.PI;
             }
         } else {
             if (this.beta > this.upperBetaLimit) {
@@ -971,7 +972,6 @@ export class ArcRotateCamera extends TargetCamera {
      * @param allowSamePosition If false, prevents reapplying the new computed position if it is identical to the current one (optim)
      */
     public setTarget(target: AbstractMesh | Vector3, toBoundingCenter = false, allowSamePosition = false): void {
-
         if ((<any>target).getBoundingInfo) {
             if (toBoundingCenter) {
                 this._targetBoundingCenter = (<any>target).getBoundingInfo().boundingBox.centerWorld.clone();
@@ -1050,7 +1050,6 @@ export class ArcRotateCamera extends TargetCamera {
     }
 
     protected _onCollisionPositionChange = (collisionId: number, newPosition: Vector3, collidedMesh: Nullable<AbstractMesh> = null) => {
-
         if (!collidedMesh) {
             this._previousPosition.copyFrom(this._position);
         } else {
@@ -1087,7 +1086,7 @@ export class ArcRotateCamera extends TargetCamera {
         this._viewMatrix.addAtIndex(13, this.targetScreenOffset.y);
 
         this._collisionTriggered = false;
-    }
+    };
 
     /**
      * Zooms on a mesh to be at the min distance where we could see it fully in the current viewport.
@@ -1111,16 +1110,17 @@ export class ArcRotateCamera extends TargetCamera {
      * @param meshesOrMinMaxVectorAndDistance Defines the mesh or bounding info to focus on
      * @param doNotUpdateMaxZ Defines whether or not maxZ should be updated whilst zooming on the mesh (this can happen if the mesh is big and the maxradius pretty small for instance)
      */
-    public focusOn(meshesOrMinMaxVectorAndDistance: AbstractMesh[] | { min: Vector3, max: Vector3, distance: number }, doNotUpdateMaxZ = false): void {
-        var meshesOrMinMaxVector: { min: Vector3, max: Vector3 };
+    public focusOn(meshesOrMinMaxVectorAndDistance: AbstractMesh[] | { min: Vector3; max: Vector3; distance: number }, doNotUpdateMaxZ = false): void {
+        var meshesOrMinMaxVector: { min: Vector3; max: Vector3 };
         var distance: number;
 
-        if ((<any>meshesOrMinMaxVectorAndDistance).min === undefined) { // meshes
-            var meshes = (<AbstractMesh[]>meshesOrMinMaxVectorAndDistance) || this.getScene().meshes;
+        if ((<any>meshesOrMinMaxVectorAndDistance).min === undefined) {
+            // meshes
+            var meshes = <AbstractMesh[]>meshesOrMinMaxVectorAndDistance || this.getScene().meshes;
             meshesOrMinMaxVector = Mesh.MinMax(meshes);
             distance = Vector3.Distance(meshesOrMinMaxVector.min, meshesOrMinMaxVector.max);
-        }
-        else { //minMaxVector and distance
+        } else {
+            //minMaxVector and distance
             var minMaxVectorAndDistance = <any>meshesOrMinMaxVectorAndDistance;
             meshesOrMinMaxVector = minMaxVectorAndDistance;
             distance = minMaxVectorAndDistance.distance;

src/Cameras/camera.ts

@@ -523,17 +523,15 @@ export class Camera extends Node {
 
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void {
     }
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: HTMLElement): void {
+    public detachControl(): void {
     }
 
     /**

src/Cameras/cameraInputsManager.ts

@@ -30,15 +30,13 @@ export interface ICameraInput<TCamera extends Camera> {
     getSimpleName(): string;
     /**
      * Attach the input controls to a specific dom element to get the input from.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    attachControl(element: HTMLElement, noPreventDefault?: boolean): void;
+    attachControl(noPreventDefault?: boolean): void;
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    detachControl(element: Nullable<HTMLElement>): void;
+    detachControl(): void;
     /**
      * Update the current camera state depending on the inputs that have been used this frame.
      * This is a dynamically created lambda to avoid the performance penalty of looping for inputs in the render loop.
@@ -75,7 +73,7 @@ export class CameraInputsManager<TCamera extends Camera> {
      * Defines the dom element the camera is collecting inputs from.
      * This is null if the controls have not been attached.
      */
-    public attachedElement: Nullable<HTMLElement>;
+    public attachedToElement: boolean = false;
 
     /**
      * Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
@@ -125,8 +123,8 @@ export class CameraInputsManager<TCamera extends Camera> {
             this.checkInputs = this._addCheckInputs(input.checkInputs.bind(input));
         }
 
-        if (this.attachedElement) {
-            input.attachControl(this.attachedElement);
+        if (this.attachedToElement) {
+            input.attachControl();
         }
     }
 
@@ -139,7 +137,7 @@ export class CameraInputsManager<TCamera extends Camera> {
         for (var cam in this.attached) {
             var input = this.attached[cam];
             if (input === inputToRemove) {
-                input.detachControl(this.attachedElement);
+                input.detachControl();
                 input.camera = null;
                 delete this.attached[cam];
                 this.rebuildInputCheck();
@@ -156,7 +154,7 @@ export class CameraInputsManager<TCamera extends Camera> {
         for (var cam in this.attached) {
             var input = this.attached[cam];
             if (input.getClassName() === inputType) {
-                input.detachControl(this.attachedElement);
+                input.detachControl();
                 input.camera = null;
                 delete this.attached[cam];
                 this.rebuildInputCheck();
@@ -177,8 +175,8 @@ export class CameraInputsManager<TCamera extends Camera> {
      * @param input Defines the input to attach
      */
     public attachInput(input: ICameraInput<TCamera>): void {
-        if (this.attachedElement) {
-            input.attachControl(this.attachedElement, this.noPreventDefault);
+        if (this.attachedToElement) {
+            input.attachControl(this.noPreventDefault);
         }
     }
 
@@ -187,17 +185,17 @@ export class CameraInputsManager<TCamera extends Camera> {
      * @param element Defines the dom element to collect the events from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachElement(element: HTMLElement, noPreventDefault: boolean = false): void {
-        if (this.attachedElement) {
+    public attachElement(noPreventDefault: boolean = false): void {
+        if (this.attachedToElement) {
             return;
         }
 
         noPreventDefault = Camera.ForceAttachControlToAlwaysPreventDefault ? false : noPreventDefault;
-        this.attachedElement = element;
+        this.attachedToElement = true;
         this.noPreventDefault = noPreventDefault;
 
         for (var cam in this.attached) {
-            this.attached[cam].attachControl(element, noPreventDefault);
+            this.attached[cam].attachControl(noPreventDefault);
         }
     }
 
@@ -206,20 +204,15 @@ export class CameraInputsManager<TCamera extends Camera> {
      * @param element Defines the dom element to collect the events from
      * @param disconnect Defines whether the input should be removed from the current list of attached inputs
      */
-    public detachElement(element: HTMLElement, disconnect = false): void {
-        if (this.attachedElement !== element) {
-            return;
-        }
+    public detachElement(disconnect = false): void {
 
         for (var cam in this.attached) {
-            this.attached[cam].detachControl(element);
+            this.attached[cam].detachControl();
 
             if (disconnect) {
                 this.attached[cam].camera = null;
             }
         }
-
-        this.attachedElement = null;
     }
 
     /**
@@ -241,11 +234,11 @@ export class CameraInputsManager<TCamera extends Camera> {
      * Remove all attached input methods from a camera
      */
     public clear(): void {
-        if (this.attachedElement) {
-            this.detachElement(this.attachedElement, true);
+        if (this.attachedToElement) {
+            this.detachElement(true);
         }
         this.attached = {};
-        this.attachedElement = null;
+        this.attachedToElement = false;
         this.checkInputs = () => { };
     }
 

src/Cameras/flyCamera.ts

@@ -8,6 +8,7 @@ import { TargetCamera } from "./targetCamera";
 import { FlyCameraInputsManager } from "./flyCameraInputsManager";
 import { FlyCameraMouseInput } from "../Cameras/Inputs/flyCameraMouseInput";
 import { FlyCameraKeyboardInput } from "../Cameras/Inputs/flyCameraKeyboardInput";
+import { Tools } from '../Misc/tools';
 
 declare type Collider = import("../Collisions/collider").Collider;
 
@@ -273,20 +274,19 @@ export class FlyCamera extends TargetCamera {
 
     /**
      * Attach a control to the HTML DOM element.
-     * @param element Defines the element that listens to the input events.
      * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        this.inputs.attachElement(element, noPreventDefault);
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+        this.inputs.attachElement(noPreventDefault);
     }
 
     /**
      * Detach a control from the HTML DOM element.
      * The camera will stop reacting to that input.
-     * @param element Defines the element that listens to the input events.
      */
-    public detachControl(element: HTMLElement): void {
-        this.inputs.detachElement(element);
+    public detachControl(): void {
+        this.inputs.detachElement();
 
         this.cameraDirection = new Vector3(0, 0, 0);
     }

src/Cameras/followCamera.ts

@@ -168,11 +168,11 @@ export class FollowCamera extends TargetCamera {
 
     /**
      * Attached controls to the current camera.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        this.inputs.attachElement(element, noPreventDefault);
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+        this.inputs.attachElement(noPreventDefault);
 
         this._reset = () => {
         };
@@ -181,10 +181,9 @@ export class FollowCamera extends TargetCamera {
     /**
      * Detach the current controls from the camera.
      * The camera will stop reacting to inputs.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: HTMLElement): void {
-        this.inputs.detachElement(element);
+    public detachControl(): void {
+        this.inputs.detachElement();
 
         if (this._reset) {
             this._reset();

src/Cameras/freeCamera.ts

@@ -8,6 +8,7 @@ import { TargetCamera } from "./targetCamera";
 import { FreeCameraInputsManager } from "./freeCameraInputsManager";
 import { FreeCameraMouseInput } from "../Cameras/Inputs/freeCameraMouseInput";
 import { FreeCameraKeyboardMoveInput } from "../Cameras/Inputs/freeCameraKeyboardMoveInput";
+import { Tools } from '../Misc/tools';
 
 declare type Collider = import("../Collisions/collider").Collider;
 
@@ -222,20 +223,19 @@ export class FreeCamera extends TargetCamera {
 
     /**
      * Attached controls to the current camera.
-     * @param element Defines the element the controls should be listened from
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
-        this.inputs.attachElement(element, noPreventDefault);
+    public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+        this.inputs.attachElement(noPreventDefault);
     }
 
     /**
      * Detach the current controls from the camera.
      * The camera will stop reacting to inputs.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(element: HTMLElement): void {
-        this.inputs.detachElement(element);
+    public detachControl(): void {
+        this.inputs.detachElement();
 
         this.cameraDirection = new Vector3(0, 0, 0);
         this.cameraRotation = new Vector2(0, 0);

src/Helpers/sceneHelpers.ts

@@ -142,9 +142,9 @@ Scene.prototype.createDefaultCamera = function(createArcRotateCamera = false, re
         camera.speed = radius * 0.2;
         this.activeCamera = camera;
 
-        let canvas = this.getEngine().getInputElement();
+        const canvas = this.getEngine().getInputElement();
         if (attachCameraControls && canvas) {
-            camera.attachControl(canvas);
+            camera.attachControl();
         }
     }
 };

src/scene.ts

@@ -2522,11 +2522,11 @@ export class Scene extends AbstractScene implements IAnimatable, IClipPlanesHold
         }
 
         if (this.activeCamera) {
-            this.activeCamera.detachControl(canvas);
+            this.activeCamera.detachControl();
         }
         this.activeCamera = newCamera;
         if (attachControl) {
-            newCamera.attachControl(canvas);
+            newCamera.attachControl();
         }
     }
 
@@ -4261,7 +4261,7 @@ export class Scene extends AbstractScene implements IAnimatable, IClipPlanesHold
         if (canvas) {
             var index;
             for (index = 0; index < this.cameras.length; index++) {
-                this.cameras[index].detachControl(canvas);
+                this.cameras[index].detachControl();
             }
         }