feat(orbit): pan at xz plane

pan in xz plane by default, use ctrlKey or metaKey to pan at y direction

src/components/controller/OrbitController.ts

@@ -143,6 +143,10 @@ export class OrbitController extends ComponentBase {
     public set maxPolarAngle(v: number) {
         this._maxPolarAngle = clamp(v, this._minPolarAngle, 90);
     }
+
+    public get spherical(): Spherical {
+        return this._spherical
+    }
     /**
      * @internal
      */
@@ -190,6 +194,7 @@ export class OrbitController extends ComponentBase {
             this._spherical.theta -= this.autoRotateSpeed * Math.PI / 180;
             this.updateCamera();
         }
+        // lerp _cPosition to _position
         let x = (this._position.x - this._cPosition.x) / step
         let y = (this._position.y - this._cPosition.y) / step
         let z = (this._position.z - this._cPosition.z) / step
@@ -235,7 +240,13 @@ export class OrbitController extends ComponentBase {
         // pan
         } else if (e.mouseCode === 2) {
             Vector3Ex.mulScale(this.object3D.transform.up, e.movementY * this.panFactor * this._camera.aspect, Vector3.HELP_1);
-            this._target.y += Vector3.HELP_1.y;
+            if (e.ctrlKey || e.metaKey) {
+                this._target.y += Vector3.HELP_1.y;
+            }else{
+                this._target.x += Vector3.HELP_1.x;
+                this._target.z += Vector3.HELP_1.z;
+            }
+
             Vector3Ex.mulScale(this.object3D.transform.right, -e.movementX * this.panFactor, Vector3.HELP_1);
             this._target.x -= Vector3.HELP_1.x;
             this._target.z -= Vector3.HELP_1.z;
@@ -261,7 +272,7 @@ export class OrbitController extends ComponentBase {
     /**
      * @internal
      */
-    private updateCamera() {
+    public updateCamera() {
         this._spherical.makeSafe();
         let pos = this._spherical.getCoords();
         this._position.set(pos.x + this._target.x, pos.y + this._target.y, pos.z + this._target.z);
@@ -288,6 +299,11 @@ export class OrbitController extends ComponentBase {
     }
 }
 
+/**
+ * @internal
+ * Epsilon to test whether numbers are close enough to be considered equal.
+ */
+const EPS = Math.PI / 180 / 100;
 /**
  * @internal
  */
@@ -311,7 +327,6 @@ class Spherical {
     }
     // restrict phi to be between EPS and PI-EPS
     public makeSafe(): this {
-        const EPS = 0.0002;
         this.phi = Math.max(EPS, Math.min(Math.PI - EPS, this.phi));
         return this;
     }
@@ -336,4 +351,4 @@ class Spherical {
         this.coords.z = sinPhiRadius * Math.cos(this.theta);
         return this.coords;
     }
-}
+}