Merge pull request #9470 from CedricGuillemet/arcPan

Fix ArcRotateCamera panning with axis decomposition

dist/preview release/what's new.md

@@ -41,6 +41,7 @@
 ## Bugs
 
 - Fix issue with the Promise polyfill where a return value was expected from resolve() ([Deltakosh](https://github.com/deltakosh))
+- Fix ArcRotateCamera panning with axis decomposition ([CedricGuillemet](https://github.com/CedricGuillemet))
 - Fix an issue with keyboard control (re)attachment. ([#9411](https://github.com/BabylonJS/Babylon.js/issues/9411)) ([RaananW](https://github.com/RaananW))
 - Fix issue where PBRSpecularGlossiness materials were excluded from export [#9423](https://github.com/BabylonJS/Babylon.js/issues/9423)([Drigax](https://github.com/drigax))
 - Fix direct loading of a glTF string that has base64-encoded URI. ([bghgary](https://github.com/bghgary))

src/Cameras/arcRotateCamera.ts

@@ -500,8 +500,7 @@ export class ArcRotateCamera extends TargetCamera {
      * Defines the allowed panning axis.
      */
     public panningAxis: Vector3 = new Vector3(1, 1, 0);
-    protected _localDirection: Vector3;
-    protected _transformedDirection: Vector3;
+    protected _transformedDirection: Vector3 = new Vector3();
 
     // Behaviors
     private _bouncingBehavior: Nullable<BouncingBehavior>;
@@ -886,19 +885,20 @@ export class ArcRotateCamera extends TargetCamera {
 
         // Panning inertia
         if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) {
-            if (!this._localDirection) {
-                this._localDirection = Vector3.Zero();
-                this._transformedDirection = Vector3.Zero();
-            }
-
-            this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, this.inertialPanningY);
-            this._localDirection.multiplyInPlace(this.panningAxis);
             this._viewMatrix.invertToRef(this._cameraTransformMatrix);
-            Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);
-            //Eliminate y if map panning is enabled (panningAxis == 1,0,1)
-            if (!this.panningAxis.y) {
-                this._transformedDirection.y = 0;
-            }
+            this._transformedDirection.set(this._cameraTransformMatrix.m[0], this._cameraTransformMatrix.m[1], this._cameraTransformMatrix.m[2]);
+
+            // panning on X Axis
+            this._transformedDirection.x *= this.panningAxis.x * this.inertialPanningX;
+            this._transformedDirection.y *= this.panningAxis.x * this.inertialPanningX;
+            this._transformedDirection.z *= this.panningAxis.x * this.inertialPanningX;
+
+            // panning on Y axis
+            this._transformedDirection.y += this.panningAxis.y * this.inertialPanningY;
+
+            // panning on Z axis
+            this._transformedDirection.x -= Math.cos(this.alpha) * this.panningAxis.z * this.inertialPanningY;
+            this._transformedDirection.z -= Math.sin(this.alpha) * this.panningAxis.z * this.inertialPanningY;
 
             if (!this._targetHost) {
                 if (this.panningDistanceLimit) {