@aibee/owlly 1.0.25

package/src/owlly/controller/basic-controller.ts

@@ -0,0 +1,1509 @@
+import TWEEN from '@tweenjs/tween.js';
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller } from './controller';
+import { OrthographicView } from '../view/orthographic-view';
+import { PerspectiveView } from '../view/perspective-view';
+import { Events, OwllyEvents } from '../utils/events';
+import { View } from '../view/view';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+import { BasicTools } from '../utils';
+
+enum STATE {
+  IDLE,
+  ROTATE,
+  ORBIT,
+  PAN,
+  DOLLY,
+  TOUCH_ROTATE,
+  TOUCH_ORBIT,
+  TOUCH_PAN,
+  TOUCH_DOLLY_ROTATE,
+  TOUCH_DOLLY_PAN,
+  TOUCH_MAP,
+}
+
+const EPS = 0.000001;
+
+type MouseButtons = { LEFT: NS_THREE.MOUSE; MIDDLE: NS_THREE.MOUSE; RIGHT: NS_THREE.MOUSE };
+
+type Touches = { ONE: NS_THREE.TOUCH; TWO: NS_THREE.TOUCH | 'map' };
+
+class BasicController extends Controller {
+  private bindingView: View | null;
+
+  private camera: NS_THREE.PerspectiveCamera | NS_THREE.OrthographicCamera;
+
+  private target: NS_THREE.Vector3;
+
+  private enabled: boolean;
+
+  private state: STATE;
+
+  private eventListeners: {
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: (e: MouseEvent) => void;
+    onMouseWheel: (e: WheelEvent) => void;
+    onContextMenu: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
+    onTouchMove: (e: TouchEvent) => void;
+    onTouchEnd: (e: TouchEvent) => void;
+  };
+
+  private needUpdate: boolean;
+
+  private enableDamping: boolean;
+
+  private dampingFactor: number;
+
+  private mouseButtons: MouseButtons;
+
+  private touches: Touches;
+
+  private boundaryEnabled: boolean;
+
+  private boundary: NS_THREE.Box3;
+
+  /* calculation vectors */
+
+  private lastTick: number;
+
+  private timeStart: number;
+
+  private timeEnd: number;
+
+  private touchCenter: NS_THREE.Vector2;
+
+  // -- inertial
+
+  private inertiaFactor: number;
+
+  // -- rotation
+
+  private enableRotate: boolean;
+
+  private rotateMode: 'self' | 'orbit';
+
+  private rotateSpeed: number;
+
+  private rotateStart: NS_THREE.Vector2;
+
+  private rotateDelta: NS_THREE.Vector2;
+
+  private rotateEnd: NS_THREE.Vector2;
+
+  private rotateLineStart: NS_THREE.Vector2;
+
+  private rotateLineEnd: NS_THREE.Vector2;
+
+  private rotateInertiaType: 'normal' | 'map';
+
+  private spherical: NS_THREE.Spherical;
+
+  private sphericalDelta: NS_THREE.Spherical;
+
+  private maxSpherical: NS_THREE.Spherical;
+
+  private minSpherical: NS_THREE.Spherical;
+
+  private lastQuaternion: NS_THREE.Quaternion;
+
+  private rotateInertiaDirection: NS_THREE.Vector2;
+
+  private rotateInertiaEnabled: boolean;
+
+  private rotateInertiaBase: number;
+
+  private rotateInertia: number;
+
+  private rotateInertiaDuration: number;
+
+  // -- dolly
+
+  private enableZoom: boolean;
+
+  private dollyStart: NS_THREE.Vector2;
+
+  private dollyEnd: NS_THREE.Vector2;
+
+  private zoomMode: 'zoom' | 'fov';
+
+  private zoomDelta: number;
+
+  private zoomRange: { min: number; max: number };
+
+  private fovRange: { min: number; max: number };
+
+  private zoomInertiaEnabled: boolean;
+
+  private zoomInertiaBase: number;
+
+  private zoomInertia: number;
+
+  private zoomInertiaDuration: number;
+
+  // -- pan
+
+  private enablePan: boolean;
+
+  private panStart: NS_THREE.Vector2;
+
+  private panDelta: NS_THREE.Vector2;
+
+  private panEnd: NS_THREE.Vector2;
+
+  private panOffset: NS_THREE.Vector3;
+
+  private panSpeed: number;
+
+  private lastPosition: NS_THREE.Vector3;
+
+  private screenSpacePanning: boolean;
+
+  private panInertiaDirection: NS_THREE.Vector2;
+
+  private panInertiaEnabled: boolean;
+
+  private panInertiaBase: number;
+
+  private panInertia: number;
+
+  private panInertiaDuration: number;
+
+  public zoomScale: number;
+
+  public followMouse: boolean;
+
+  private mouseXY: NS_THREE.Vector2;
+
+  constructor(view: PerspectiveView | OrthographicView) { // OrthographicView |
+    super();
+    const { THREE } = Externals.getInstance();
+
+    this.eventListeners = {
+      onMouseDown: (e): void => { this.onMouseDown(e); },
+      onMouseMove: (e): void => { this.onMouseMove(e); },
+      onMouseUp: (e): void => { this.onMouseUp(e); },
+      onMouseWheel: (e): void => { this.onMouseWheel(e); },
+      onTouchStart: (e): void => { this.onTouchStart(e); },
+      onTouchMove: (e): void => { this.onTouchMove(e); },
+      onTouchEnd: (e): void => { this.onTouchEnd(e); },
+      onContextMenu: (e): void => { this.onContextMenu(e); },
+    };
+
+    this.state = STATE.IDLE;
+    this.enabled = true;
+
+    this.target = new THREE.Vector3();
+    this.lastTick = Date.now();
+    this.enableDamping = false;
+    this.dampingFactor = 0;
+    this.mouseButtons = {
+      LEFT: THREE.MOUSE.ROTATE,
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: THREE.MOUSE.PAN,
+    };
+    this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
+
+    this.boundaryEnabled = false;
+    this.boundary = new THREE.Box3(
+      new THREE.Vector3(-Infinity, -Infinity, -Infinity),
+      new THREE.Vector3(Infinity, Infinity, Infinity),
+    );
+
+    this.touchCenter = new THREE.Vector2();
+    this.inertiaFactor = 1;
+
+    this.enableRotate = true;
+    this.rotateMode = 'self';
+    this.rotateSpeed = 1;
+    this.rotateStart = new THREE.Vector2();
+    this.rotateEnd = new THREE.Vector2();
+    this.rotateDelta = new THREE.Vector2();
+    this.rotateLineStart = new THREE.Vector2();
+    this.rotateLineEnd = new THREE.Vector2();
+    this.rotateInertiaDirection = new THREE.Vector2();
+    this.rotateInertiaEnabled = true;
+    this.rotateInertiaBase = 0;
+    this.rotateInertia = 0;
+    this.rotateInertiaType = 'normal';
+    this.spherical = new THREE.Spherical();
+    this.sphericalDelta = new THREE.Spherical();
+    this.maxSpherical = new THREE.Spherical(1, Infinity, Infinity);
+    this.minSpherical = new THREE.Spherical(1, -Infinity, -Infinity);
+    this.lastQuaternion = new THREE.Quaternion();
+
+    this.enableZoom = true;
+    this.dollyStart = new THREE.Vector2();
+    this.dollyEnd = new THREE.Vector2();
+    this.zoomMode = 'zoom';
+    this.zoomDelta = 0;
+    this.zoomRange = { min: 1, max: 10 };
+    this.fovRange = { min: 60, max: 90 };
+    this.zoomInertiaEnabled = true;
+    this.zoomInertiaBase = 0;
+    this.zoomInertia = 0;
+    this.zoomScale = 1;
+
+    this.enablePan = true;
+    this.panStart = new THREE.Vector2();
+    this.panDelta = new THREE.Vector2();
+    this.panEnd = new THREE.Vector2();
+    this.panOffset = new THREE.Vector3();
+    this.panSpeed = 1;
+    this.screenSpacePanning = true;
+    this.lastPosition = new THREE.Vector3();
+    this.panInertiaDirection = new THREE.Vector2();
+    this.panInertiaEnabled = true;
+    this.panInertiaBase = 0;
+    this.panInertia = 0;
+    this.mouseXY = new THREE.Vector2();
+    this.bindView(view);
+  }
+
+  private registerEvents(): void {
+    if (!this.bindingView) return;
+    this.bindingView.on(OwllyEvents.MOUSE_DOWN, this.eventListeners.onMouseDown);
+    this.bindingView.on(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+    this.bindingView.on(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+    this.bindingView.on(OwllyEvents.MOUSE_WHEEL, this.eventListeners.onMouseWheel);
+    this.bindingView.on(OwllyEvents.TOUCH_START, this.eventListeners.onTouchStart);
+    this.bindingView.on(OwllyEvents.TOUCH_MOVE, this.eventListeners.onTouchMove);
+    this.bindingView.on(OwllyEvents.TOUCH_END, this.eventListeners.onTouchEnd);
+    this.bindingView.on(OwllyEvents.CONTEXT_MENU, this.eventListeners.onContextMenu);
+  }
+
+  private unregisterEvents(): void {
+    if (!this.bindingView) return;
+    this.bindingView.off(OwllyEvents.MOUSE_DOWN, this.eventListeners.onMouseDown);
+    this.bindingView.off(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+    this.bindingView.off(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+    this.bindingView.off(OwllyEvents.MOUSE_WHEEL, this.eventListeners.onMouseWheel);
+    this.bindingView.off(OwllyEvents.TOUCH_START, this.eventListeners.onTouchStart);
+    this.bindingView.off(OwllyEvents.TOUCH_MOVE, this.eventListeners.onTouchMove);
+    this.bindingView.off(OwllyEvents.TOUCH_END, this.eventListeners.onTouchEnd);
+    this.bindingView.off(OwllyEvents.CONTEXT_MENU, this.eventListeners.onContextMenu);
+  }
+
+  /* Event Callbacks */
+
+  private onMouseDown(e: MouseEvent): void {
+    e.preventDefault();
+
+    let mouseAction;
+
+    switch (e.button) {
+      case 0: mouseAction = this.mouseButtons.LEFT; break;
+      case 1: mouseAction = this.mouseButtons.MIDDLE; break;
+      case 2: mouseAction = this.mouseButtons.RIGHT; break;
+      default: break;
+    }
+
+    switch (mouseAction) {
+      case NS_THREE.MOUSE.ROTATE: if (this.enableRotate) this.state = STATE.ROTATE; break;
+      case NS_THREE.MOUSE.PAN: if (this.enablePan) this.state = STATE.PAN; break;
+      case NS_THREE.MOUSE.DOLLY: if (this.enableZoom) this.state = STATE.DOLLY; break;
+      default: this.state = STATE.IDLE; break;
+    }
+
+    switch (this.state) {
+      case STATE.ROTATE: this.handleMouseDownRotate(e); break;
+      case STATE.PAN: this.handleMouseDownPan(e); break;
+      case STATE.DOLLY: this.handleMouseDownDolly(e); break;
+      default: break;
+    }
+
+    if (this.state !== STATE.IDLE) {
+      if (this.bindingView) {
+        this.bindingView.on(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+        this.bindingView.on(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+      }
+      this.panInertiaBase = 0;
+      this.rotateInertiaBase = 0;
+      this.zoomInertiaBase = 0;
+    }
+  }
+
+  private onMouseMove(e: MouseEvent): void {
+    e.preventDefault();
+
+    switch (this.state) {
+      case STATE.ROTATE: this.handleMouseMoveSelfRotate(e); break;
+      case STATE.PAN: this.handleMouseMovePan(e); break;
+      case STATE.DOLLY: this.handleMouseMoveDolly(e); break;
+      default: break;
+    }
+  }
+
+  private onMouseUp(e: MouseEvent): void {
+    e.preventDefault();
+
+    if (this.bindingView) {
+      this.bindingView.off(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+      this.bindingView.off(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+    }
+
+    switch (this.state) {
+      case STATE.ROTATE: this.handleUpRotate(); break;
+      case STATE.PAN: this.handleUpPan(); break;
+      default: break;
+    }
+
+    this.state = STATE.IDLE;
+  }
+
+  private onMouseWheel(e: WheelEvent): void {
+    if (!this.enableZoom || (this.state !== STATE.IDLE && this.state !== STATE.ROTATE)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.handleMouseWheel(e);
+  }
+
+  private onContextMenu(e: MouseEvent): void {
+    e.preventDefault();
+  }
+
+  private onTouchStart(e: TouchEvent): void {
+    if (EnvironmentUtils.GetEnv() !== Env.Miniapp) {
+      e.preventDefault();
+    }
+
+    this.timeStart = e.timeStamp;
+
+    switch (e.touches.length) {
+      case 1:
+        switch (this.touches.ONE) {
+          case NS_THREE.TOUCH.PAN: if (this.enablePan) this.state = STATE.TOUCH_PAN; break;
+          case NS_THREE.TOUCH.ROTATE: if (this.enableRotate) this.state = STATE.TOUCH_ROTATE; break;
+          default: this.state = STATE.IDLE; break;
+        }
+        break;
+      case 2:
+        this.touchCenter.set(
+          (e.touches[0].clientX + e.touches[1].clientX) / 2,
+          (e.touches[0].clientY + e.touches[1].clientY) / 2,
+        );
+        switch (this.touches.TWO) {
+          case NS_THREE.TOUCH.DOLLY_PAN: this.state = STATE.TOUCH_DOLLY_PAN; break;
+          case NS_THREE.TOUCH.DOLLY_ROTATE: this.state = STATE.TOUCH_DOLLY_ROTATE; break;
+          case 'map': this.state = STATE.TOUCH_MAP; break;
+          default: this.state = STATE.IDLE; break;
+        }
+        break;
+      default: this.state = STATE.IDLE; break;
+    }
+
+    switch (this.state) {
+      case STATE.TOUCH_PAN: this.handleTouchStartPan(e); break;
+      case STATE.TOUCH_ROTATE: this.handleTouchStartRotate(e); break;
+      case STATE.TOUCH_DOLLY_ROTATE: this.handleTouchStartDollyRotate(e); break;
+      case STATE.TOUCH_DOLLY_PAN: this.handleTouchStartDollyPan(e); break;
+      case STATE.TOUCH_MAP: this.handleTouchStartMap(e); break;
+      default: break;
+    }
+
+    if (this.state !== STATE.IDLE) {
+      if (this.bindingView) {
+        this.bindingView.on(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+        this.bindingView.on(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+      }
+      this.panInertiaBase = 0;
+      this.rotateInertiaBase = 0;
+      this.zoomInertiaBase = 0;
+    }
+  }
+
+  private onTouchMove(e: TouchEvent): void {
+    if (EnvironmentUtils.GetEnv() !== Env.Miniapp) {
+      e.preventDefault();
+    }
+
+    if (e.touches.length === 2) {
+      this.touchCenter.set(
+        (e.touches[0].clientX + e.touches[1].clientX) / 2,
+        (e.touches[0].clientY + e.touches[1].clientY) / 2,
+      );
+    }
+
+    switch (this.state) {
+      case STATE.TOUCH_PAN: this.handleTouchMovePan(e); break;
+      case STATE.TOUCH_ROTATE: this.handleTouchMoveSelfRotate(e); break;
+      case STATE.TOUCH_DOLLY_ROTATE: this.handleTouchMoveDollyRotate(e); break;
+      case STATE.TOUCH_DOLLY_PAN: this.handleTouchMoveDollyPan(e); break;
+      case STATE.TOUCH_MAP: this.handleTouchMoveAll(e); break;
+      default: break;
+    }
+
+    this.timeEnd = this.timeStart;
+    this.timeStart = e.timeStamp;
+  }
+
+  private onTouchEnd(e: TouchEvent): void {
+    if (EnvironmentUtils.GetEnv() !== Env.Miniapp) {
+      e.preventDefault();
+    }
+
+    switch (this.state) {
+      case STATE.TOUCH_ROTATE:
+      case STATE.TOUCH_DOLLY_ROTATE: this.handleUpRotate(); break;
+      case STATE.TOUCH_PAN:
+      case STATE.TOUCH_DOLLY_PAN: this.handleUpPan(); break;
+      case STATE.TOUCH_MAP: this.handleUpAll(); break;
+      default: break;
+    }
+
+    this.state = STATE.IDLE;
+  }
+
+  /* Action Handlers */
+
+  private handleMouseDownRotate(e: MouseEvent): void {
+    this.handleDownRotate(e.offsetX, e.offsetY);
+  }
+
+  private handleMouseMoveSelfRotate(e: MouseEvent): void {
+    this.handleMoveRotate(e.offsetX, e.offsetY);
+  }
+
+  private handleTouchStartRotate(e: TouchEvent): void {
+    if (e.touches.length === 1) {
+      this.handleDownRotate(e.touches[0].clientX, e.touches[0].clientY);
+    } else if (this.state === STATE.TOUCH_MAP) {
+      const slope = (e.touches[1].clientY - e.touches[0].clientY) / (e.touches[1].clientX - e.touches[0].clientX);
+      const intercept = e.touches[0].clientY - slope * e.touches[0].clientX;
+      this.rotateLineStart.set(slope, intercept);
+    } else {
+      const x = 0.5 * (e.touches[0].clientX + e.touches[1].clientX);
+      const y = 0.5 * (e.touches[0].clientY + e.touches[1].clientY);
+      this.handleDownRotate(x, y);
+    }
+  }
+
+  private handleTouchMoveSelfRotate(e: TouchEvent): void {
+    if (!this.bindingView) return;
+    if (e.touches.length === 1) {
+      this.handleMoveRotate(e.touches[0].clientX, e.touches[0].clientY);
+    } else if (this.state === STATE.TOUCH_MAP) {
+      const slope = (e.touches[1].clientY - e.touches[0].clientY) / (e.touches[1].clientX - e.touches[0].clientX);
+      const intercept = e.touches[0].clientY - slope * e.touches[0].clientX;
+      this.rotateLineEnd.set(slope, intercept);
+
+      if (Number.isFinite(this.rotateLineEnd.x) && Number.isFinite(this.rotateLineStart.x)) {
+        const interceptionX = (this.rotateLineStart.y - this.rotateLineEnd.y)
+          / (this.rotateLineEnd.x - this.rotateLineStart.x);
+        const interceptionY = slope * interceptionX + intercept;
+
+        if (Number.isFinite(interceptionX) && Number.isFinite(interceptionY)) {
+          let angleDelta = Math.atan(this.rotateLineEnd.x) - Math.atan(this.rotateLineStart.x);
+          if (Math.PI - Math.abs(angleDelta) < 0.5) {
+            angleDelta = -Math.sign(angleDelta) * (Math.PI - Math.abs(angleDelta));
+          }
+
+          if (Math.abs(angleDelta) > 0.01) {
+            const cameraCenter = this.rotateLineStart.clone().set(
+              // TODO: 这里需要处理为View的尺寸
+              this.bindingView.getViewWidth() / 2,
+              this.bindingView.getViewHeight() / 2,
+            );
+            const rotateCenter = this.rotateLineStart.clone().set(interceptionX, interceptionY);
+            const cameraDelta = cameraCenter.clone().rotateAround(rotateCenter, angleDelta).sub(cameraCenter);
+            this.handlePanDelta(cameraDelta.x, cameraDelta.y);
+
+            this.rotateDelta.set(angleDelta, 0);
+            this.handleRotateSphericalDelta(this.rotateDelta.x, this.rotateDelta.y);
+          }
+        }
+      }
+
+      this.rotateLineStart.copy(this.rotateLineEnd);
+    } else {
+      const x = 0.5 * (e.touches[0].clientX + e.touches[1].clientX);
+      const y = 0.5 * (e.touches[0].clientY + e.touches[1].clientY);
+      this.handleMoveRotate(x, y);
+    }
+  }
+
+  private handleDownRotate(x: number, y: number): void {
+    this.rotateStart.set(x, y);
+  }
+
+  private handleMoveRotate(x: number, y: number): void {
+    this.rotateEnd.set(x, y);
+    this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart).multiplyScalar(this.rotateSpeed);
+
+    this.handleRotateDelta(this.rotateDelta.x, this.rotateDelta.y);
+
+    this.rotateStart.copy(this.rotateEnd);
+  }
+
+  private handleRotateDelta(deltaX: number, deltaY: number): void {
+    if (!this.bindingView) return;
+    // TODO: 这里需要处理为View的尺寸
+    const clientHeight = this.bindingView.getViewHeight();
+    const xCorrection = this.rotateMode === 'self' ? -1 : 1;
+    let factor = 1;
+
+    if ((this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) {
+      const camera = this.camera as NS_THREE.PerspectiveCamera;
+      factor *= camera.fov / camera.zoom / 360;
+    }
+
+    this.handleRotateSphericalDelta(
+      -xCorrection * 2 * Math.PI * deltaX / clientHeight * factor,
+      -2 * Math.PI * deltaY / clientHeight * factor,
+    );
+  }
+
+  private handleRotateSphericalDelta(deltaTheta: number, deltaPhi: number): void {
+    this.sphericalDelta.theta += deltaTheta;
+    this.sphericalDelta.phi += deltaPhi;
+  }
+
+  private handleUpRotate(): void {
+    if (!this.rotateInertiaEnabled || !this.bindingView) return;
+
+    const timeElapsed = this.timeStart - this.timeEnd;
+
+    if (this.state === STATE.TOUCH_MAP) {
+      // do nothing now
+      this.rotateInertiaType = 'map';
+      const speed = this.rotateDelta.x / timeElapsed;
+      if (Number.isFinite(speed) && speed > 0.001) {
+        this.rotateInertiaBase = this.rotateDelta.x / 10;
+        this.rotateInertiaDuration = 0;
+        this.rotateInertia = this.rotateInertiaBase;
+      }
+    } else {
+      this.rotateInertiaType = 'normal';
+      const speed = this.rotateDelta.length() * this.rotateSpeed / timeElapsed;
+
+      // TODO: 这里需要处理为View的尺寸
+      const clientWidth = this.bindingView.getViewWidth();
+      const factor = speed * 1000 / clientWidth * 0.6;
+
+      if (timeElapsed === 0 || !Number.isFinite(speed)) return;
+
+      if (Number.isFinite(speed) && speed > 0.3) {
+        this.rotateInertiaBase = speed * factor * this.inertiaFactor;
+        this.rotateInertiaDuration = 0;
+        this.rotateInertiaDirection = this.rotateDelta.clone().normalize();
+        this.rotateInertia = this.rotateInertiaBase;
+      }
+    }
+  }
+
+  private handleMouseDownPan(e: MouseEvent): void {
+    this.handleDownPan(e.offsetX, e.offsetY);
+  }
+
+  private handleMouseMovePan(e: MouseEvent): void {
+    this.handleMovePan(e.offsetX, e.offsetY);
+  }
+
+  private handleTouchStartPan(e: TouchEvent): void {
+    if (e.touches.length === 1) {
+      this.handleDownPan(e.touches[0].clientX, e.touches[0].clientY);
+    } else {
+      const x = 0.5 * (e.touches[0].clientX + e.touches[1].clientX);
+      const y = 0.5 * (e.touches[0].clientY + e.touches[1].clientY);
+      this.handleDownPan(x, y);
+    }
+  }
+
+  private handleTouchMovePan(e: TouchEvent): void {
+    if (e.touches.length === 1) {
+      this.handleMovePan(e.touches[0].clientX, e.touches[0].clientY);
+    } else {
+      const x = 0.5 * (e.touches[0].clientX + e.touches[1].clientX);
+      const y = 0.5 * (e.touches[0].clientY + e.touches[1].clientY);
+      this.handleMovePan(x, y);
+    }
+  }
+
+  private handleDownPan(x: number, y: number): void {
+    this.panStart.set(x, y);
+  }
+
+  private handleMovePan(x: number, y: number): void {
+    this.panEnd.set(x, y);
+    this.panDelta.subVectors(this.panEnd, this.panStart).multiplyScalar(this.panSpeed);
+
+    this.handlePanDelta(this.panDelta.x, this.panDelta.y);
+
+    this.panStart.copy(this.panEnd);
+  }
+
+  private handlePanDelta(deltaX: number, deltaY: number): void {
+    if (!this.bindingView) return;
+    const { THREE } = Externals.getInstance();
+    const v = new THREE.Vector3();
+    // TODO: 这里需要处理为View的尺寸
+    const clientWidth = this.bindingView.getViewWidth();
+    const clientHeight = this.bindingView.getViewHeight();
+    let offsetX = 0;
+    let offsetY = 0;
+    if ((this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) {
+      const camera = this.camera as NS_THREE.PerspectiveCamera;
+      v.subVectors(this.target, this.camera.position);
+
+      let targetDistance = v.length();
+
+      targetDistance *= Math.tan((camera.fov / 2) * Math.PI / 180.0);
+
+      offsetX = 2 * deltaX * targetDistance / clientHeight;
+      offsetY = 2 * deltaY * targetDistance / clientHeight;
+    } else {
+      const camera = this.camera as NS_THREE.OrthographicCamera;
+      offsetX = deltaX * (camera.right - camera.left) / camera.zoom / clientWidth;
+      offsetY = deltaY * (camera.top - camera.bottom) / camera.zoom / clientHeight;
+    }
+
+    v.setFromMatrixColumn(this.camera.matrix, 0);
+    v.multiplyScalar(-offsetX);
+    this.panOffset.add(v);
+
+    if (this.screenSpacePanning) {
+      v.setFromMatrixColumn(this.camera.matrix, 1);
+    } else {
+      v.setFromMatrixColumn(this.camera.matrix, 0);
+      v.crossVectors(this.camera.up, v);
+    }
+
+    v.multiplyScalar(offsetY);
+    this.panOffset.add(v);
+  }
+
+  private handleUpPan(): void {
+    if (!this.panInertiaEnabled) return;
+
+    const timeElapsed = this.timeStart - this.timeEnd;
+    const speed = this.panDelta.length() * 10 * this.panSpeed / timeElapsed;
+
+    if (timeElapsed === 0 || !Number.isFinite(speed)) return;
+
+    if (Number.isFinite(speed) && speed > 1) {
+      this.panInertiaBase = speed * this.inertiaFactor;
+      this.panInertiaDuration = 0;
+      this.panInertiaDirection = this.panDelta.clone().normalize();
+      this.panInertia = this.panInertiaBase;
+    }
+  }
+
+  private handleMouseWheel(e: WheelEvent): void {
+    this.zoomDelta = e.deltaY / 67;
+    this.mouseXY.set(e.offsetX, e.offsetY);
+    // console.log(e);
+  }
+
+  private handleZoom(delta: number): void {
+    if (Math.abs(delta) < 0.0001) return;
+    let zoomChange = 0;
+    let lastPos: NS_THREE.Vector3|null = null;
+    if (this.followMouse) {
+      lastPos = BasicTools.getHorizontalPlaneCoordinate3(
+        { x: this.mouseXY.x, y: this.mouseXY.y }, this.bindingView!, this.camera,
+      );
+    }
+    // eslint-disable-next-line no-param-reassign
+    delta *= this.zoomScale;
+    if (this.zoomMode === 'zoom') {
+      const tZoom = Math.min(
+        Math.max(this.camera.zoom * (1 + delta), this.zoomRange.min),
+        this.zoomRange.max,
+      );
+      zoomChange = tZoom - this.camera.zoom;
+      this.camera.zoom = tZoom;
+    } else if ((this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) {
+      const camera = this.camera as NS_THREE.PerspectiveCamera;
+      camera.fov = Math.min(
+        Math.max(camera.fov + delta * 66.67, this.fovRange.min),
+        this.fovRange.max,
+      );
+    }
+
+    this.camera.updateProjectionMatrix();
+    this.needUpdate = true;
+    this.emit(Events.CAMERA_ZOOM,
+      this.zoomMode,
+      this.zoomMode === 'zoom' ? this.camera.zoom : (this.camera as NS_THREE.PerspectiveCamera).fov,
+      this);
+
+    if (this.followMouse && zoomChange && this.bindingView) {
+      const nowPos = BasicTools.getHorizontalPlaneCoordinate3(
+        { x: this.mouseXY.x, y: this.mouseXY.y }, this.bindingView!, this.camera,
+      );
+      if (lastPos! && nowPos) {
+        const vector = nowPos.clone().sub(lastPos!);
+        this.setCameraPosition(this.camera.position.clone().sub(vector), true);
+      }
+    }
+  }
+
+  private handleUpZoom(): void {
+    if (!this.zoomInertiaEnabled) return;
+
+    const timeElapsed = this.timeStart - this.timeEnd;
+    const speed = this.zoomDelta / timeElapsed;
+
+    if (timeElapsed === 0 || !Number.isFinite(speed)) return;
+
+    if (Math.abs(speed) > 0.001) {
+      this.zoomInertiaBase = speed * this.inertiaFactor * 2;
+      this.zoomInertiaDuration = 0;
+      this.zoomInertia = this.zoomInertiaBase;
+    }
+  }
+
+  private handleMouseDownDolly(e: MouseEvent): void {
+    this.dollyStart.set(e.offsetX, e.offsetY);
+  }
+
+  private handleMouseMoveDolly(e: MouseEvent): void {
+    this.dollyEnd.set(e.offsetX, e.offsetY);
+
+    const sign = -Math.sign(this.dollyEnd.y - this.dollyStart.y);
+    const distance = this.dollyStart.distanceTo(this.dollyEnd);
+
+    // const { innerWidth, innerHeight } = window;
+    // const diagonalDist = Math.sqrt((innerWidth ** 2) + (innerHeight ** 2));
+    const clientWidth = this.bindingView!.getViewWidth();
+    const clientHeight = this.bindingView!.getViewHeight();
+    const diagonalDist = Math.sqrt((clientWidth ** 2) + (clientHeight ** 2));
+    const distRatio = distance / diagonalDist;
+
+    this.zoomDelta = sign * Math.floor(distRatio * diagonalDist) * EnvironmentUtils.GetGlobalDPR();
+
+    this.dollyStart.copy(this.dollyEnd);
+  }
+
+  private handleTouchStartDolly(e: TouchEvent): void {
+    const dx = e.touches[0].clientX - e.touches[1].clientX;
+    const dy = e.touches[0].clientY - e.touches[1].clientY;
+
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    this.dollyStart.set(0, distance);
+  }
+
+  private handleTouchMoveDolly(e: TouchEvent): void {
+    if (!this.bindingView) return;
+    const dx = e.touches[0].clientX - e.touches[1].clientX;
+    const dy = e.touches[0].clientY - e.touches[1].clientY;
+
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    this.dollyEnd.set(0, distance);
+
+    // let innerWidth = 0;
+    // let innerHeight = 0;
+    // if (EnvironmentUtils.GetEnv() !== Env.Miniapp) {
+    //   innerWidth = window.innerWidth;
+    //   innerHeight = window.innerWidth;
+    // } else {
+    //   innerWidth = this.bindingView.canvas.clientWidth;
+    //   innerHeight = this.bindingView.canvas.clientHeight;
+    // }
+    const innerWidth = this.bindingView.canvas.clientWidth;
+    const innerHeight = this.bindingView.canvas.clientHeight;
+    const diagonalDist = Math.sqrt((innerWidth ** 2) + (innerHeight ** 2));
+    const distRatio = (distance - this.dollyStart.y) / diagonalDist;
+
+    this.zoomDelta = -distRatio;
+
+    let d = 1 + Math.abs(this.zoomDelta);
+    if (this.zoomDelta > 0) d = 1 / d;
+    this.zoomDelta = d - 1;
+    this.zoomDelta *= 2;
+
+    const cameraCenter = this.touchCenter.clone().set(
+      // TODO: 这里需要处理为View的尺寸
+      this.bindingView.getViewWidth() / 2,
+      this.bindingView.getViewHeight() / 2,
+    );
+    const zoomPanDelta = this.touchCenter.clone().sub(cameraCenter).multiplyScalar(-this.zoomDelta);
+
+    this.mouseXY.set(this.touchCenter.x, this.touchCenter.y);
+    this.zoomDelta *= EnvironmentUtils.GetGlobalDPR();
+
+    this.handlePanDelta(zoomPanDelta.x, zoomPanDelta.y);
+
+    this.dollyStart.copy(this.dollyEnd);
+  }
+
+  private handleTouchStartDollyRotate(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchStartDolly(e);
+    if (this.enableRotate) this.handleTouchStartRotate(e);
+  }
+
+  private handleTouchMoveDollyRotate(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchMoveDolly(e);
+    if (this.enableRotate) this.handleTouchMoveSelfRotate(e);
+  }
+
+  private handleTouchStartDollyPan(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchStartDolly(e);
+    if (this.enablePan) this.handleTouchStartPan(e);
+  }
+
+  private handleTouchMoveDollyPan(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchMoveDolly(e);
+    if (this.enablePan) this.handleTouchMovePan(e);
+  }
+
+  private handleTouchStartMap(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchStartDolly(e);
+    if (this.enablePan) this.handleTouchStartPan(e);
+    if (this.enableRotate) this.handleTouchStartRotate(e);
+  }
+
+  private handleTouchMoveAll(e: TouchEvent): void {
+    if (this.enableZoom) this.handleTouchMoveDolly(e);
+    if (this.enablePan) this.handleTouchMovePan(e);
+    if (this.enableRotate) this.handleTouchMoveSelfRotate(e);
+  }
+
+  private handleUpAll(): void {
+    this.handleUpZoom();
+    this.handleUpPan();
+    this.handleUpRotate();
+  }
+
+  private resetVectors(): void {
+    this.panInertiaBase = 0;
+    this.panInertia = 0;
+    this.panDelta.set(0, 0);
+    this.rotateInertiaBase = 0;
+    this.rotateInertia = 0;
+    this.rotateDelta.set(0, 0);
+  }
+
+  /* Camera Movement */
+
+  /** @ignore 暂缓开放 */
+  public async moveCameraTo(
+    position: NS_THREE.Vector3,
+    duration = 1000,
+    callbacks?: {
+      onUpdate?: (progress: number) => void;
+    },
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      const { THREE } = Externals.getInstance();
+      const from = this.camera.position.clone();
+      const positionVector = new THREE.Vector3();
+
+      const cb = callbacks || {};
+
+      new TWEEN.Tween({ progress: 0 })
+        .to({ progress: 1 }, duration)
+        .easing(TWEEN.Easing.Quadratic.InOut)
+        .onUpdate(
+          (
+            { progress }: { progress: number },
+          ) => {
+            positionVector.lerpVectors(from, position, progress);
+            this.camera.position.copy(positionVector);
+
+            if (cb.onUpdate) cb.onUpdate(progress);
+
+            this.needUpdate = true;
+          },
+        )
+        .onComplete(() => {
+          resolve();
+        })
+        .start();
+    });
+  }
+
+  /* Getter & Setters */
+
+  /**
+   * 设置相机位置坐标
+   * @param position 位置坐标
+   * @param updateTarget 是否更新目标点坐标, 默认为true
+   */
+  public setCameraPosition(position: NS_THREE.Vector3, updateTarget = true): void {
+    const { THREE } = Externals.getInstance();
+    const lookAtVector = new THREE.Vector3().subVectors(this.target, this.camera.position);
+    this.camera.position.copy(position);
+    if (updateTarget) this.target.copy(position.clone().add(lookAtVector));
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取相机位置坐标
+   */
+  public getCameraPosition(): NS_THREE.Vector3 {
+    return this.camera.position.clone();
+  }
+
+  /**
+   * 设置当前相机看向目标位置
+   * @param target 目标点坐标
+   * @param updateCameraPosition 是否同步更新相机位置, 默认值为false
+   */
+  public setCameraLookAt(target: NS_THREE.Vector3, updateCameraPosition = false): void {
+    const { THREE } = Externals.getInstance();
+    const lookAtVector = new THREE.Vector3().subVectors(this.camera.position, this.target);
+    this.target.copy(target);
+    if (updateCameraPosition) this.camera.position.copy(target.clone().add(lookAtVector));
+    this.camera.lookAt(target);
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取相机看向目标位置
+   * @returns vec3
+   */
+  public getCameraTarget(): NS_THREE.Vector3 {
+    return this.target.clone();
+  }
+
+  /**
+   * 设置当前相机视线方向
+   * @param direction 方向向量
+   * @param distance 目标距离, 默认值为1
+   */
+  public setCameraLookAtVector(direction: NS_THREE.Vector3, distance = 1): void {
+    this.setCameraLookAt(this.camera.position.clone().add(direction.normalize().multiplyScalar(distance)));
+  }
+
+  /**
+   * 设置是否开启阻尼
+   * @param enable 布尔值
+   */
+  public setDampingEnabled(enable: boolean): void {
+    this.enableDamping = enable;
+  }
+
+  /**
+   * 设置阻尼系数, 默认值为0
+   * @param factor 阻尼系数
+   */
+  public setDampingFactor(factor: number): void {
+    this.dampingFactor = factor;
+  }
+
+  /**
+   * 获取阻尼系数
+   */
+  public getDampingFactor(): number {
+    return this.dampingFactor;
+  }
+
+  /**
+   * 设置是否激活缩放
+   * @param enable 布尔值
+   */
+  public setZoomEnabled(enable: boolean): void {
+    this.enableZoom = enable;
+  }
+
+  /**
+   * 设置放大模式, 可选值: 'zoom': 使用变焦放大, 'fov': 使用fov放大
+   * @param mode 放大模式
+   */
+  public setZoomMode(mode: 'zoom' | 'fov'): void {
+    if ((this.camera as NS_THREE.OrthographicCamera).isOrthographicCamera && mode === 'fov') {
+      throw new Error('[BasicController] Cannot use fov zoom mode for OrthographicCamera');
+    }
+    this.zoomMode = mode;
+  }
+
+  /**
+   * 设置相机fov范围, 默认值为[60, 90]
+   * @param min 最小值
+   * @param max 最大值
+   */
+  public setFovRange(min: number, max: number): void {
+    this.fovRange.min = min;
+    this.fovRange.max = max;
+
+    if (!(this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) return;
+
+    const camera = this.camera as NS_THREE.PerspectiveCamera;
+
+    camera.fov = Math.min(
+      Math.max(camera.fov, this.fovRange.min),
+      this.fovRange.max,
+    );
+    camera.updateProjectionMatrix();
+    this.needUpdate = true;
+  }
+
+  /**
+   * 设置当前相机fov, 仅限透视投影相机使用
+   * @param fov FOV值
+   */
+  public setFov(fov: number): void {
+    if (!(this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) return;
+
+    const camera = this.camera as NS_THREE.PerspectiveCamera;
+
+    camera.fov = Math.min(
+      Math.max(fov, this.fovRange.min),
+      this.fovRange.max,
+    );
+    camera.updateProjectionMatrix();
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取当前相机fov, 仅限透视投影相机使用
+   */
+  public getFov(): number | null {
+    if (!(this.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera) return null;
+    return (this.camera as NS_THREE.PerspectiveCamera).fov;
+  }
+
+  /**
+   * 设置变焦倍数范围, 默认值为[0, 10]
+   * @param min 最小值
+   * @param max 最大值
+   */
+  public setZoomRange(min: number, max: number): void {
+    this.zoomRange.min = min;
+    this.zoomRange.max = max;
+
+    this.camera.zoom = Math.min(
+      Math.max(this.camera.zoom, this.zoomRange.min),
+      this.zoomRange.max,
+    );
+    this.camera.updateProjectionMatrix();
+    this.needUpdate = true;
+  }
+
+  /**
+   * 设置当前变焦倍数, 倍数受倍数范围影响
+   * @param zoom 变焦倍数
+   */
+  public setZoom(zoom: number): void {
+    this.camera.zoom = Math.min(
+      Math.max(zoom, this.zoomRange.min),
+      this.zoomRange.max,
+    );
+    this.camera.updateProjectionMatrix();
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取当前变焦倍数
+   */
+  public getZoom(): number {
+    return this.camera.zoom;
+  }
+
+  /**
+   * 设置是否激活变焦的惯性
+   * @param enabled 布尔值
+   */
+  public setZoomInertiaEnabled(enabled: boolean): void {
+    this.zoomInertiaEnabled = enabled;
+  }
+
+  /**
+   * 设置是否激活旋转
+   * @param enable 布尔值
+   */
+  public setRotateEnabled(enable: boolean): void {
+    this.enableRotate = enable;
+  }
+
+  /**
+   * 设置旋转模式, 可选值 'self':自转, 'orbit': 公转
+   * @param mode 旋转模式
+   */
+  public setRotateMode(mode: 'self' | 'orbit'): void {
+    this.rotateMode = mode;
+  }
+
+  /**
+   * 设置旋转速度
+   * @param speed 旋转速度倍数
+   */
+  public setRotateSpeed(speed: number): void {
+    this.rotateSpeed = speed;
+  }
+
+  /**
+   * 获取旋转速度
+   */
+  public getRotateSpeed(): number {
+    return this.rotateSpeed;
+  }
+
+  /**
+   * 设置是否激活旋转运动的惯性
+   * @param enabled 布尔值
+   */
+  public setRotateInertiaEnabled(enabled: boolean): void {
+    this.rotateInertiaEnabled = enabled;
+  }
+
+  /**
+   * 设置横向转动角度
+   * @param azimuth 弧度
+   */
+  public setAzimuthAngle(azimuth: number): void {
+    const { THREE } = Externals.getInstance();
+    const quat = new THREE.Quaternion().setFromUnitVectors(this.camera.up, new THREE.Vector3(0, 1, 0));
+    const quatInverse = quat.clone().invert();
+    const lookAtVector = new THREE.Vector3().subVectors(this.target, this.camera.position);
+
+    if (this.rotateMode === 'orbit') lookAtVector.multiplyScalar(-1);
+
+    lookAtVector.applyQuaternion(quat);
+    this.spherical.setFromVector3(lookAtVector);
+
+    this.spherical.theta = azimuth;
+
+    this.spherical.makeSafe();
+
+    lookAtVector.setFromSpherical(this.spherical);
+    lookAtVector.applyQuaternion(quatInverse);
+
+    if (this.rotateMode === 'self') {
+      this.target.copy(this.camera.position.clone().add(lookAtVector));
+    } else {
+      this.camera.position.copy(this.target.clone().add(lookAtVector));
+    }
+
+    this.camera.lookAt(this.target);
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取当前横向转动值, 范围区间为[-2 * PI, 2 * PI]
+   */
+  public getAzimuthAngle(): number {
+    return this.spherical.theta;
+  }
+
+  /**
+   * 设置纵向旋转角度
+   * @param polar 弧度
+   */
+  public setPolarAngle(polar: number): void {
+    const { THREE } = Externals.getInstance();
+    const quat = new THREE.Quaternion().setFromUnitVectors(this.camera.up, new THREE.Vector3(0, 1, 0));
+    const quatInverse = quat.clone().invert();
+    const lookAtVector = new THREE.Vector3().subVectors(this.target, this.camera.position);
+
+    if (this.rotateMode === 'orbit') lookAtVector.multiplyScalar(-1);
+
+    lookAtVector.applyQuaternion(quat);
+    this.spherical.setFromVector3(lookAtVector);
+
+    this.spherical.phi = polar;
+
+    this.spherical.makeSafe();
+
+    lookAtVector.setFromSpherical(this.spherical);
+    lookAtVector.applyQuaternion(quatInverse);
+
+    if (this.rotateMode === 'self') {
+      this.target.copy(this.camera.position.clone().add(lookAtVector));
+    } else {
+      this.camera.position.copy(this.target.clone().add(lookAtVector));
+    }
+
+    this.camera.lookAt(this.target);
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取当前纵向转动值
+   */
+  public getPolarAngle(): number {
+    return this.spherical.phi;
+  }
+
+  /**
+   * 设置横向转动范围, 范围区间为[-2 * PI, 2 * PI]
+   * @param min 最小值
+   * @param max 最大值
+   */
+  public setAzimuthRange(min: number, max: number): void {
+    this.minSpherical.theta = min;
+    this.maxSpherical.theta = max;
+  }
+
+  /**
+   * 设置纵向旋转范围, 范围区间为[0, PI]
+   * @param min 最小值
+   * @param max 最大值
+   */
+  public setPolarRange(min: number, max: number): void {
+    this.minSpherical.phi = min;
+    this.maxSpherical.phi = max;
+  }
+
+  /**
+   * 设置是否激活摇镜运动的惯性
+   * @param enabled 布尔值
+   */
+  public setPanInertiaEnabled(enabled: boolean): void {
+    this.panInertiaEnabled = enabled;
+  }
+
+  /**
+   * 设置惯性系数
+   * @param factor 惯性系数
+   */
+  public setInertiaFactor(factor: number): void {
+    this.inertiaFactor = factor;
+  }
+
+  /**
+   * 设置是否激活摇镜(移动)
+   * @param enable 布尔值
+   */
+  public setPanEnabled(enable: boolean): void {
+    this.enablePan = enable;
+  }
+
+  /**
+   * 设置摇镜操作是否跟随屏幕空间朝向
+   * @param enabled 布尔值
+   */
+  public setScreenSpacePanning(enabled: boolean): void {
+    this.screenSpacePanning = enabled;
+  }
+
+  /**
+   * 设置鼠标操作关联
+   * @param mouseButtons 鼠标操作关联
+   */
+  public setMouseButtons(mouseButtons: MouseButtons): void {
+    this.mouseButtons = mouseButtons;
+  }
+
+  /**
+   * 设置触摸操作关联
+   * @param touches 触摸操作关联
+   */
+  public setTouches(touches: Touches): void {
+    this.touches = touches;
+  }
+
+  /**
+   * 设置是否限制相机运动范围
+   * @param enable 是否限制
+   */
+  public setBoundaryEnabled(enable: boolean): void {
+    this.boundaryEnabled = enable;
+  }
+
+  /**
+   * 设置相机运动范围, 范围是一个包围盒, 使用最小值点与最大值点描述
+   * @param min 包围盒最小值点坐标, 默认值为无限小
+   * @param max 包围盒最大值点坐标, 默认值为无限大
+   */
+  public setBoundary(min: NS_THREE.Vector3, max: NS_THREE.Vector3): void {
+    this.boundary.set(min, max);
+  }
+
+  /**
+   * 设置BasicController是否激活可用
+   * @param enabled 是否激活
+   */
+  public setEnabled(enabled: boolean): void {
+    if (enabled === this.enabled) return;
+    this.enabled = enabled;
+    if (enabled) {
+      this.registerEvents();
+    } else {
+      this.unregisterEvents();
+      this.resetVectors();
+    }
+  }
+
+  /**
+   * 获取当前激活状态
+   */
+  public getEnabled(): boolean {
+    return this.enabled;
+  }
+
+  /** @ignore */
+  bindView(view: PerspectiveView | OrthographicView): void { // OrthographicView |
+    this.unbindView();
+    if (!view.container && !view.canvas) {
+      throw new Error('View needed initialized with an HTML container or Canvas');
+    }
+    if (!view.camera) throw new Error('[BasicController] View for basic controller should have a camera.');
+    if (
+      !(view.camera as NS_THREE.PerspectiveCamera).isPerspectiveCamera
+      && !(view.camera as NS_THREE.OrthographicCamera).isOrthographicCamera
+    ) {
+      throw new Error('[BasicController] Only supports PerspectiveCamera or OrthographicCamera.');
+    }
+    const { THREE } = Externals.getInstance();
+    this.camera = view.camera;
+    this.bindingView = view;
+    this.target = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion);
+    this.registerEvents();
+  }
+
+  /** @ignore */
+  update(): boolean {
+    const now = Date.now();
+    const timeElapsed = now - this.lastTick;
+    this.lastTick = now;
+
+    const { THREE } = Externals.getInstance();
+    const quat = new THREE.Quaternion().setFromUnitVectors(this.camera.up, new THREE.Vector3(0, 1, 0));
+    const quatInverse = quat.clone().invert();
+
+    const lookAtVector = new THREE.Vector3().subVectors(this.target, this.camera.position);
+
+    if (this.rotateMode === 'orbit') lookAtVector.multiplyScalar(-1);
+
+    if (Math.abs(this.zoomInertiaBase) > 0 && this.zoomInertiaDuration < 600) {
+      this.handleZoom(this.zoomInertia);
+
+      const q = this.zoomInertiaDuration / 600;
+      this.zoomInertia = this.zoomInertiaBase * ((1 - q) ** 2);
+      this.zoomInertia = Math.max(0, Math.abs(this.zoomInertia)) * Math.sign(this.zoomInertia);
+      this.zoomInertiaDuration += timeElapsed;
+    }
+
+    if (this.panInertiaBase > 0 && this.panInertiaDuration < 600) {
+      const { x, y } = this.panInertiaDirection;
+      this.handlePanDelta(x * this.panInertia, y * this.panInertia);
+
+      const q = this.panInertiaDuration / 600;
+      this.panInertia = this.panInertiaBase * ((1 - q) ** 2);
+      this.panInertia = Math.max(0, this.panInertia);
+      this.panInertiaDuration += timeElapsed;
+    }
+
+    if (this.rotateInertiaBase > 0 && this.rotateInertiaDuration < 600) {
+      if (this.rotateInertiaType === 'normal') {
+        const { x, y } = this.rotateInertiaDirection;
+        this.handleRotateDelta(x * this.rotateInertia, y * this.rotateInertia);
+      } else {
+        this.handleRotateSphericalDelta(this.rotateInertia, 0);
+      }
+      const q = this.rotateInertiaDuration / 600;
+      this.rotateInertia = this.rotateInertiaBase * ((1 - q) ** 2);
+      this.rotateInertia = Math.max(0, this.rotateInertia);
+      this.rotateInertiaDuration += timeElapsed;
+    }
+
+    lookAtVector.applyQuaternion(quat);
+
+    this.spherical.setFromVector3(lookAtVector);
+
+    const sphericalDelta = this.sphericalDelta.clone();
+    let { zoomDelta } = this;
+
+    if (this.enableDamping) {
+      sphericalDelta.theta *= this.dampingFactor;
+      sphericalDelta.phi *= this.dampingFactor;
+      zoomDelta *= this.dampingFactor;
+    }
+
+    this.spherical.theta += sphericalDelta.theta;
+    this.spherical.phi += sphericalDelta.phi;
+
+    let { theta: minAzimuth } = this.minSpherical;
+    let { theta: maxAzimuth } = this.maxSpherical;
+    const twoPI = Math.PI * 2;
+
+    if (Number.isFinite(minAzimuth) && Number.isFinite(maxAzimuth)) {
+      if (minAzimuth < -Math.PI) minAzimuth += twoPI;
+      else if (minAzimuth > Math.PI) minAzimuth -= twoPI;
+
+      if (maxAzimuth < -Math.PI) maxAzimuth += twoPI;
+      else if (maxAzimuth > Math.PI) maxAzimuth -= twoPI;
+
+      if (minAzimuth < maxAzimuth) {
+        this.spherical.theta = Math.max(minAzimuth, Math.min(maxAzimuth, this.spherical.theta));
+      } else {
+        this.spherical.theta = (this.spherical.theta > (minAzimuth + maxAzimuth) / 2)
+          ? Math.max(minAzimuth, this.spherical.theta)
+          : Math.min(maxAzimuth, this.spherical.theta);
+      }
+    }
+    this.spherical.phi = Math.max(this.minSpherical.phi, Math.min(this.maxSpherical.phi, this.spherical.phi));
+
+    this.spherical.makeSafe();
+
+    lookAtVector.setFromSpherical(this.spherical);
+    lookAtVector.applyQuaternion(quatInverse);
+
+    this.handleZoom(zoomDelta);
+
+    if (this.enableDamping) {
+      if (this.rotateMode === 'self') this.camera.position.addScaledVector(this.panOffset, this.dampingFactor);
+      else this.target.addScaledVector(this.panOffset, this.dampingFactor);
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (this.rotateMode === 'self') this.camera.position.add(this.panOffset);
+      else this.target.add(this.panOffset);
+    }
+
+    if (this.boundaryEnabled) {
+      if (this.rotateMode === 'self') {
+        this.camera.position.x = Math.min(this.boundary.max.x, Math.max(this.boundary.min.x, this.camera.position.x));
+        this.camera.position.y = Math.min(this.boundary.max.y, Math.max(this.boundary.min.y, this.camera.position.y));
+        this.camera.position.z = Math.min(this.boundary.max.z, Math.max(this.boundary.min.z, this.camera.position.z));
+      } else {
+        this.target.x = Math.min(this.boundary.max.x, Math.max(this.boundary.min.x, this.target.x));
+        this.target.y = Math.min(this.boundary.max.y, Math.max(this.boundary.min.y, this.target.y));
+        this.target.z = Math.min(this.boundary.max.z, Math.max(this.boundary.min.z, this.target.z));
+      }
+    }
+
+    if (this.rotateMode === 'self') {
+      this.target.copy(this.camera.position.clone().add(lookAtVector));
+    } else {
+      this.camera.position.copy(this.target.clone().add(lookAtVector));
+    }
+
+    this.camera.lookAt(this.target);
+
+    if (this.enableDamping) {
+      this.sphericalDelta.theta *= (1 - this.dampingFactor);
+      this.sphericalDelta.phi *= (1 - this.dampingFactor);
+      this.panOffset.multiplyScalar(1 - this.dampingFactor);
+      this.zoomDelta *= (1 - this.dampingFactor);
+    } else {
+      this.sphericalDelta.set(0, 0, 0);
+      this.panOffset.set(0, 0, 0);
+      this.zoomDelta = 0;
+    }
+    if (
+      this.needUpdate
+      || this.lastPosition.distanceToSquared(this.camera.position) > EPS
+      || 8 * (1 - this.lastQuaternion.dot(this.camera.quaternion)) > EPS
+    ) {
+      this.lastPosition.copy(this.camera.position);
+      this.lastQuaternion.copy(this.camera.quaternion);
+      this.needUpdate = false;
+      this.emit(
+        Events.CAMERA_CHANGED,
+        this.camera.position.clone(),
+        this.camera.quaternion.clone(),
+        this,
+      );
+      return true;
+    }
+    return false;
+  }
+
+  /** @ignore */
+  unbind(): void {
+    this.dispose();
+    this.unbindView();
+  }
+
+  unbindView(): void {
+    this.unregisterEvents();
+    this.bindingView = null;
+  }
+}
+
+export { BasicController };