Adding inertia to ArcRotateCamera panning

dist/preview release - alpha/babylon.2.2.max.js

@@ -7268,9 +7268,9 @@ var BABYLON;
             var uv0 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3] * 2);
             var uv1 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3 + 1] * 2);
             var uv2 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3 + 2] * 2);
-            uv0 = uv0.scale(this.bu);
-            uv1 = uv1.scale(this.bv);
-            uv2 = uv2.scale(1.0 - this.bu - this.bv);
+            uv0 = uv0.scale(1.0 - this.bu - this.bv);
+            uv1 = uv1.scale(this.bu);
+            uv2 = uv2.scale(this.bv);
             return new BABYLON.Vector2(uv0.x + uv1.x + uv2.x, uv0.y + uv1.y + uv2.y);
         };
         return PickingInfo;
@@ -10789,7 +10789,9 @@ var BABYLON;
             this.angularSensibility = 1000.0;
             this.wheelPrecision = 3.0;
             this.pinchPrecision = 2.0;
-            this.panningSensibility = 0.1;
+            this.panningSensibility = 50.0;
+            this.inertialPanningX = 0;
+            this.inertialPanningY = 0;
             this.keysUp = [38];
             this.keysDown = [40];
             this.keysLeft = [37];
@@ -10802,7 +10804,6 @@ var BABYLON;
             this._viewMatrix = new BABYLON.Matrix();
             this._isRightClick = false;
             this._isCtrlPushed = false;
-            this._lastPanningPosition = new BABYLON.Vector2(0, 0);
             this.checkCollisions = false;
             this.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5);
             this._collider = new BABYLON.Collider();
@@ -10892,10 +10893,8 @@ var BABYLON;
             var engine = this.getEngine();
             if (this._onPointerDown === undefined) {
                 this._onPointerDown = function (evt) {
-                    // Manage panning
+                    // Manage panning with right click
                     _this._isRightClick = evt.button === 2 ? true : false;
-                    _this._lastPanningPosition.x = evt.clientX;
-                    _this._lastPanningPosition.y = evt.clientY;
                     // manage pointers
                     pointers.add(evt.pointerId, { x: evt.clientX, y: evt.clientY, type: evt.pointerType });
                     cacheSoloPointer = pointers.item(evt.pointerId);
@@ -10925,27 +10924,17 @@ var BABYLON;
                     switch (pointers.count) {
                         case 1:
                             if ((_this._isCtrlPushed && useCtrlForPanning) || (!useCtrlForPanning && _this._isRightClick)) {
-                                if (!_this._localDirection) {
-                                    _this._localDirection = BABYLON.Vector3.Zero();
-                                    _this._transformedDirection = BABYLON.Vector3.Zero();
-                                }
-                                var diffx = (evt.clientX - _this._lastPanningPosition.x) * _this.panningSensibility;
-                                var diffy = (evt.clientY - _this._lastPanningPosition.y) * _this.panningSensibility;
-                                _this._localDirection.copyFromFloats(-diffx, diffy, 0);
-                                _this._viewMatrix.invertToRef(_this._cameraTransformMatrix);
-                                BABYLON.Vector3.TransformNormalToRef(_this._localDirection, _this._cameraTransformMatrix, _this._transformedDirection);
-                                _this.target.addInPlace(_this._transformedDirection);
-                                _this._lastPanningPosition.x = evt.clientX;
-                                _this._lastPanningPosition.y = evt.clientY;
+                                _this.inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / _this.panningSensibility;
+                                _this.inertialPanningY += (evt.clientY - cacheSoloPointer.y) / _this.panningSensibility;
                             }
                             else {
                                 var offsetX = evt.clientX - cacheSoloPointer.x;
                                 var offsetY = evt.clientY - cacheSoloPointer.y;
                                 _this.inertialAlphaOffset -= offsetX / _this.angularSensibility;
                                 _this.inertialBetaOffset -= offsetY / _this.angularSensibility;
-                                cacheSoloPointer.x = evt.clientX;
-                                cacheSoloPointer.y = evt.clientY;
                             }
+                            cacheSoloPointer.x = evt.clientX;
+                            cacheSoloPointer.y = evt.clientY;
                             break;
                         case 2:
                             //if (noPreventDefault) { evt.preventDefault(); } //if pinch gesture, could be usefull to force preventDefault to avoid html page scroll/zoom in some mobile browsers
@@ -11147,6 +11136,23 @@ var BABYLON;
                 if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon)
                     this.inertialRadiusOffset = 0;
             }
+            // Panning inertia
+            if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) {
+                if (!this._localDirection) {
+                    this._localDirection = BABYLON.Vector3.Zero();
+                    this._transformedDirection = BABYLON.Vector3.Zero();
+                }
+                this.inertialPanningX *= this.inertia;
+                this.inertialPanningY *= this.inertia;
+                if (Math.abs(this.inertialPanningX) < BABYLON.Engine.Epsilon)
+                    this.inertialPanningX = 0;
+                if (Math.abs(this.inertialPanningY) < BABYLON.Engine.Epsilon)
+                    this.inertialPanningY = 0;
+                this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, 0);
+                this._viewMatrix.invertToRef(this._cameraTransformMatrix);
+                BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);
+                this.target.addInPlace(this._transformedDirection);
+            }
             // Limits
             this._checkLimits();
             _super.prototype._checkInputs.call(this);
@@ -20175,7 +20181,7 @@ var BABYLON;
                         // Material ?
                         if (parsedMesh.materialId) {
                             var materialFound = (loadedMaterialsIds.indexOf(parsedMesh.materialId) !== -1);
-                            if (!materialFound) {
+                            if (!materialFound && parsedData.multiMaterials) {
                                 for (var multimatIndex = 0; multimatIndex < parsedData.multiMaterials.length; multimatIndex++) {
                                     var parsedMultiMaterial = parsedData.multiMaterials[multimatIndex];
                                     if (parsedMultiMaterial.id == parsedMesh.materialId) {

src/Cameras/babylon.arcRotateCamera.js

@@ -28,7 +28,9 @@ var BABYLON;
             this.angularSensibility = 1000.0;
             this.wheelPrecision = 3.0;
             this.pinchPrecision = 2.0;
-            this.panningSensibility = 0.1;
+            this.panningSensibility = 50.0;
+            this.inertialPanningX = 0;
+            this.inertialPanningY = 0;
             this.keysUp = [38];
             this.keysDown = [40];
             this.keysLeft = [37];
@@ -41,7 +43,6 @@ var BABYLON;
             this._viewMatrix = new BABYLON.Matrix();
             this._isRightClick = false;
             this._isCtrlPushed = false;
-            this._lastPanningPosition = new BABYLON.Vector2(0, 0);
             this.checkCollisions = false;
             this.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5);
             this._collider = new BABYLON.Collider();
@@ -131,10 +132,8 @@ var BABYLON;
             var engine = this.getEngine();
             if (this._onPointerDown === undefined) {
                 this._onPointerDown = function (evt) {
-                    // Manage panning
+                    // Manage panning with right click
                     _this._isRightClick = evt.button === 2 ? true : false;
-                    _this._lastPanningPosition.x = evt.clientX;
-                    _this._lastPanningPosition.y = evt.clientY;
                     // manage pointers
                     pointers.add(evt.pointerId, { x: evt.clientX, y: evt.clientY, type: evt.pointerType });
                     cacheSoloPointer = pointers.item(evt.pointerId);
@@ -164,27 +163,17 @@ var BABYLON;
                     switch (pointers.count) {
                         case 1:
                             if ((_this._isCtrlPushed && useCtrlForPanning) || (!useCtrlForPanning && _this._isRightClick)) {
-                                if (!_this._localDirection) {
-                                    _this._localDirection = BABYLON.Vector3.Zero();
-                                    _this._transformedDirection = BABYLON.Vector3.Zero();
-                                }
-                                var diffx = (evt.clientX - _this._lastPanningPosition.x) * _this.panningSensibility;
-                                var diffy = (evt.clientY - _this._lastPanningPosition.y) * _this.panningSensibility;
-                                _this._localDirection.copyFromFloats(-diffx, diffy, 0);
-                                _this._viewMatrix.invertToRef(_this._cameraTransformMatrix);
-                                BABYLON.Vector3.TransformNormalToRef(_this._localDirection, _this._cameraTransformMatrix, _this._transformedDirection);
-                                _this.target.addInPlace(_this._transformedDirection);
-                                _this._lastPanningPosition.x = evt.clientX;
-                                _this._lastPanningPosition.y = evt.clientY;
+                                _this.inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / _this.panningSensibility;
+                                _this.inertialPanningY += (evt.clientY - cacheSoloPointer.y) / _this.panningSensibility;
                             }
                             else {
                                 var offsetX = evt.clientX - cacheSoloPointer.x;
                                 var offsetY = evt.clientY - cacheSoloPointer.y;
                                 _this.inertialAlphaOffset -= offsetX / _this.angularSensibility;
                                 _this.inertialBetaOffset -= offsetY / _this.angularSensibility;
-                                cacheSoloPointer.x = evt.clientX;
-                                cacheSoloPointer.y = evt.clientY;
                             }
+                            cacheSoloPointer.x = evt.clientX;
+                            cacheSoloPointer.y = evt.clientY;
                             break;
                         case 2:
                             //if (noPreventDefault) { evt.preventDefault(); } //if pinch gesture, could be usefull to force preventDefault to avoid html page scroll/zoom in some mobile browsers
@@ -386,6 +375,23 @@ var BABYLON;
                 if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon)
                     this.inertialRadiusOffset = 0;
             }
+            // Panning inertia
+            if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) {
+                if (!this._localDirection) {
+                    this._localDirection = BABYLON.Vector3.Zero();
+                    this._transformedDirection = BABYLON.Vector3.Zero();
+                }
+                this.inertialPanningX *= this.inertia;
+                this.inertialPanningY *= this.inertia;
+                if (Math.abs(this.inertialPanningX) < BABYLON.Engine.Epsilon)
+                    this.inertialPanningX = 0;
+                if (Math.abs(this.inertialPanningY) < BABYLON.Engine.Epsilon)
+                    this.inertialPanningY = 0;
+                this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, 0);
+                this._viewMatrix.invertToRef(this._cameraTransformMatrix);
+                BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);
+                this.target.addInPlace(this._transformedDirection);
+            }
             // Limits
             this._checkLimits();
             _super.prototype._checkInputs.call(this);

src/Cameras/babylon.arcRotateCamera.ts

@@ -14,7 +14,9 @@
         public angularSensibility = 1000.0;
         public wheelPrecision = 3.0;
         public pinchPrecision = 2.0;
-        public panningSensibility: number = 0.1;
+        public panningSensibility: number = 50.0;
+        public inertialPanningX: number = 0;
+        public inertialPanningY: number = 0;
         public keysUp = [38];
         public keysDown = [40];
         public keysLeft = [37];
@@ -47,7 +49,6 @@
         private _transformedDirection: Vector3;
         private _isRightClick: boolean = false;
         private _isCtrlPushed: boolean = false;
-        private _lastPanningPosition: Vector2 = new Vector2(0, 0);
 
         // Collisions
         public onCollide: (collidedMesh: AbstractMesh) => void;
@@ -126,10 +127,8 @@
 
             if (this._onPointerDown === undefined) {
                 this._onPointerDown = evt => {
-                    // Manage panning
+                    // Manage panning with right click
                     this._isRightClick = evt.button === 2 ? true : false;
-                    this._lastPanningPosition.x = evt.clientX;
-                    this._lastPanningPosition.y = evt.clientY;
 
                     // manage pointers
                     pointers.add(evt.pointerId, { x: evt.clientX, y: evt.clientY, type: evt.pointerType });
@@ -167,30 +166,16 @@
 
                         case 1: //normal camera rotation
                             if ((this._isCtrlPushed && useCtrlForPanning) || (!useCtrlForPanning && this._isRightClick)) {
-                                if (!this._localDirection) {
-                                    this._localDirection = Vector3.Zero();
-                                    this._transformedDirection = Vector3.Zero();
-                                }
-
-                                var diffx = (evt.clientX - this._lastPanningPosition.x) * this.panningSensibility;
-                                var diffy = (evt.clientY - this._lastPanningPosition.y) * this.panningSensibility;
-
-                                this._localDirection.copyFromFloats(-diffx, diffy, 0);
-                                this._viewMatrix.invertToRef(this._cameraTransformMatrix);
-                                Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);
-                                this.target.addInPlace(this._transformedDirection);
-
-                                this._lastPanningPosition.x = evt.clientX;
-                                this._lastPanningPosition.y = evt.clientY;
-
+                                this.inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / this.panningSensibility;
+                                this.inertialPanningY += (evt.clientY - cacheSoloPointer.y) / this.panningSensibility;
                             } else {
                                 var offsetX = evt.clientX - cacheSoloPointer.x;
                                 var offsetY = evt.clientY - cacheSoloPointer.y;
                                 this.inertialAlphaOffset -= offsetX / this.angularSensibility;
                                 this.inertialBetaOffset -= offsetY / this.angularSensibility;
-                                cacheSoloPointer.x = evt.clientX;
-                                cacheSoloPointer.y = evt.clientY;
                             }
+                            cacheSoloPointer.x = evt.clientX;
+                            cacheSoloPointer.y = evt.clientY;
                             break;
 
                         case 2: //pinch
@@ -424,6 +409,27 @@
                     this.inertialRadiusOffset = 0;
             }
 
+            // Panning inertia
+            if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) {
+                if (!this._localDirection) {
+                    this._localDirection = Vector3.Zero();
+                    this._transformedDirection = Vector3.Zero();
+                }
+
+                this.inertialPanningX *= this.inertia;
+                this.inertialPanningY *= this.inertia;
+
+                if (Math.abs(this.inertialPanningX) < Engine.Epsilon)
+                    this.inertialPanningX = 0;
+                if (Math.abs(this.inertialPanningY) < Engine.Epsilon)
+                    this.inertialPanningY = 0;
+
+                this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, 0);
+                this._viewMatrix.invertToRef(this._cameraTransformMatrix);
+                Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);
+                this.target.addInPlace(this._transformedDirection);
+            }
+
             // Limits
             this._checkLimits();
 

src/Collisions/babylon.pickingInfo.js

@@ -64,9 +64,9 @@ var BABYLON;
             var uv0 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3] * 2);
             var uv1 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3 + 1] * 2);
             var uv2 = BABYLON.Vector2.FromArray(uvs, indices[this.faceId * 3 + 2] * 2);
-            uv0 = uv0.scale(this.bu);
-            uv1 = uv1.scale(this.bv);
-            uv2 = uv2.scale(1.0 - this.bu - this.bv);
+            uv0 = uv0.scale(1.0 - this.bu - this.bv);
+            uv1 = uv1.scale(this.bu);
+            uv2 = uv2.scale(this.bv);
             return new BABYLON.Vector2(uv0.x + uv1.x + uv2.x, uv0.y + uv1.y + uv2.y);
         };
         return PickingInfo;

src/Collisions/babylon.pickingInfo.ts

@@ -78,3 +78,4 @@
         }
     }
 } 
+

src/Loading/Plugins/babylon.babylonFileLoader.js

@@ -1346,4 +1346,4 @@ var BABYLON;
         });
     })(Internals = BABYLON.Internals || (BABYLON.Internals = {}));
 })(BABYLON || (BABYLON = {}));
-//# sourceMappingURL=babylon.babylonFileLoader.js.map
+//# sourceMappingURL=babylon.babylonFileLoader.js.map