Camera movement: Support for iframes

Babylon/Cameras/babylon.arcRotateCamera.js

@@ -244,11 +244,13 @@ var BABYLON;
             element.addEventListener("mousemove", this._onMouseMove, false);
             element.addEventListener("MSPointerDown", this._onGestureStart, false);
             element.addEventListener("MSGestureChange", this._onGesture, false);
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
             element.addEventListener('mousewheel', this._wheel, false);
             element.addEventListener('DOMMouseScroll', this._wheel, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+
+            var root = window.parent || window;
+            root.addEventListener("keydown", this._onKeyDown, false);
+            root.addEventListener("keyup", this._onKeyUp, false);
+            root.addEventListener("blur", this._onLostFocus, false);
         };
 
         ArcRotateCamera.prototype.detachControl = function (element) {
@@ -263,11 +265,13 @@ var BABYLON;
             element.removeEventListener("mousemove", this._onMouseMove);
             element.removeEventListener("MSPointerDown", this._onGestureStart);
             element.removeEventListener("MSGestureChange", this._onGesture);
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
             element.removeEventListener('mousewheel', this._wheel);
             element.removeEventListener('DOMMouseScroll', this._wheel);
-            window.removeEventListener("blur", this._onLostFocus);
+
+            var root = window.parent || window;
+            root.removeEventListener("keydown", this._onKeyDown);
+            root.removeEventListener("keyup", this._onKeyUp);
+            root.removeEventListener("blur", this._onLostFocus);
 
             this._MSGestureHandler = null;
             this._attachedElement = null;

Babylon/Cameras/babylon.arcRotateCamera.ts

@@ -260,11 +260,13 @@
             element.addEventListener("mousemove", this._onMouseMove, false);
             element.addEventListener("MSPointerDown", this._onGestureStart, false);
             element.addEventListener("MSGestureChange", this._onGesture, false);
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
             element.addEventListener('mousewheel', this._wheel, false);
             element.addEventListener('DOMMouseScroll', this._wheel, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+
+            var root = window.parent || window;
+            root.addEventListener("keydown", this._onKeyDown, false);
+            root.addEventListener("keyup", this._onKeyUp, false);
+            root.addEventListener("blur", this._onLostFocus, false);
         }
 
         public detachControl(element: HTMLElement): void {
@@ -279,11 +281,13 @@
             element.removeEventListener("mousemove", this._onMouseMove);
             element.removeEventListener("MSPointerDown", this._onGestureStart);
             element.removeEventListener("MSGestureChange", this._onGesture);
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
             element.removeEventListener('mousewheel', this._wheel);
             element.removeEventListener('DOMMouseScroll', this._wheel);
-            window.removeEventListener("blur", this._onLostFocus);
+
+            var root = window.parent || window;
+            root.removeEventListener("keydown", this._onKeyDown);
+            root.removeEventListener("keyup", this._onKeyUp);
+            root.removeEventListener("blur", this._onLostFocus);
 
             this._MSGestureHandler = null;
             this._attachedElement = null;

Babylon/Cameras/babylon.freeCamera.js

@@ -235,9 +235,11 @@ var BABYLON;
             element.addEventListener("mouseup", this._onMouseUp, false);
             element.addEventListener("mouseout", this._onMouseOut, false);
             element.addEventListener("mousemove", this._onMouseMove, false);
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+
+            var root = window.parent || window;
+            root.addEventListener("keydown", this._onKeyDown, false);
+            root.addEventListener("keyup", this._onKeyUp, false);
+            root.addEventListener("blur", this._onLostFocus, false);
         };
 
         FreeCamera.prototype.detachControl = function (element) {
@@ -249,9 +251,11 @@ var BABYLON;
             element.removeEventListener("mouseup", this._onMouseUp);
             element.removeEventListener("mouseout", this._onMouseOut);
             element.removeEventListener("mousemove", this._onMouseMove);
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+
+            var root = window.parent || window;
+            root.removeEventListener("keydown", this._onKeyDown);
+            root.removeEventListener("keyup", this._onKeyUp);
+            root.removeEventListener("blur", this._onLostFocus);
 
             this._attachedElement = null;
             if (this._reset) {

Babylon/Cameras/babylon.freeCamera.ts

@@ -250,9 +250,11 @@
             element.addEventListener("mouseup", this._onMouseUp, false);
             element.addEventListener("mouseout", this._onMouseOut, false);
             element.addEventListener("mousemove", this._onMouseMove, false);
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+
+            var root = window.parent || window;
+            root.addEventListener("keydown", this._onKeyDown, false);
+            root.addEventListener("keyup", this._onKeyUp, false);
+            root.addEventListener("blur", this._onLostFocus, false);
         }
 
         public detachControl(element: HTMLElement): void {
@@ -264,9 +266,11 @@
             element.removeEventListener("mouseup", this._onMouseUp);
             element.removeEventListener("mouseout", this._onMouseOut);
             element.removeEventListener("mousemove", this._onMouseMove);
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+
+            var root = window.parent || window;
+            root.removeEventListener("keydown", this._onKeyDown);
+            root.removeEventListener("keyup", this._onKeyUp);
+            root.removeEventListener("blur", this._onLostFocus);
 
             this._attachedElement = null;
             if (this._reset) {

Babylon/Cameras/babylon.touchCamera.js

@@ -98,7 +98,9 @@ var BABYLON = BABYLON || {};
         canvas.addEventListener("pointerup", this._onPointerUp);
         canvas.addEventListener("pointerout", this._onPointerUp);
         canvas.addEventListener("pointermove", this._onPointerMove);
-        window.addEventListener("blur", this._onLostFocus);
+
+        var root = window.parent || window;
+        root.addEventListener("blur", this._onLostFocus);
     };
 
     BABYLON.TouchCamera.prototype.detachControl = function (canvas) {
@@ -110,7 +112,9 @@ var BABYLON = BABYLON || {};
         canvas.removeEventListener("pointerup", this._onPointerUp);
         canvas.removeEventListener("pointerout", this._onPointerUp);
         canvas.removeEventListener("pointermove", this._onPointerMove);
-        window.removeEventListener("blur", this._onLostFocus);
+
+        var root = window.parent || window;
+        root.removeEventListener("blur", this._onLostFocus);
         
         this._attachedCanvas = null;
     };