@aibee/owlly 1.0.25

package/src/owlly/controller/panorama-adjust-controller.ts

@@ -0,0 +1,183 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller, ListenerSet } from './controller';
+import { Panorama } from '../element/panorama';
+import { View } from '../view/view';
+import { Camera } from '../utils/camera';
+
+/** @ignore */
+enum STATE {
+  IDLE,
+  TO_MOVE_CAMERA,
+  MOVE_CAMERA
+}
+
+/**
+ * 全景图矫正控制器, 暂不使用
+ * @ignore
+ */
+class PanoramaAdjustController extends Controller {
+  private enabled: boolean;
+
+  private view: View;
+
+  private target: HTMLElement;
+
+  private mousePosition: NS_THREE.Vector2;
+
+  private mouseDownPosition: NS_THREE.Vector2;
+
+  private state: STATE;
+
+  private cameraInfoHolder: { yaw: number; pitch: number };
+
+  private listeners: ListenerSet;
+
+  private renderThisFrame: boolean;
+
+  private activePanorama?: Panorama;
+
+  /**
+   * @param view 需要绑定的View
+   */
+  constructor(view: View) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.enabled = false;
+    this.mousePosition = new THREE.Vector2();
+    this.mouseDownPosition = new THREE.Vector2();
+    this.state = STATE.IDLE;
+    this.cameraInfoHolder = {} as { yaw: number; pitch: number };
+    this.renderThisFrame = false;
+    this.listeners = {
+      pointerdown: (e): void => { this.onPointerDown(e); },
+      pointerup: (): void => { this.onPointerUpOrLeave(); },
+      pointerleave: (): void => { this.onPointerUpOrLeave(); },
+      pointermove: (e): void => { this.onPointerMove(e); },
+    };
+    if (view) this.bindView(view);
+  }
+
+  private onPointerDown(e: PointerEvent): void {
+    const { offsetX, offsetY, button } = e;
+    if (button !== 0) return;
+    this.mouseDownPosition.x = offsetX;
+    this.mouseDownPosition.y = offsetY;
+    e.stopPropagation();
+    e.preventDefault();
+    if (this.state !== STATE.IDLE) return;
+    this.state = STATE.TO_MOVE_CAMERA;
+  }
+
+  private onPointerUpOrLeave(): void {
+    if (this.state === STATE.IDLE) return;
+    this.state = STATE.IDLE;
+  }
+
+  private onPointerMove(e: PointerEvent): void {
+    const { offsetX, offsetY } = e;
+    this.mousePosition.x = offsetX;
+    this.mousePosition.y = offsetY;
+    e.stopPropagation();
+    e.preventDefault();
+
+    const camera = this.view.camera! as NS_THREE.PerspectiveCamera;
+    if (!camera) return;
+    const { THREE } = Externals.getInstance();
+    if (this.state === STATE.TO_MOVE_CAMERA) {
+      const v = camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+      const { yaw, pitch } = Camera.getYawPitchFromCameraLookVector(v);
+      this.cameraInfoHolder.yaw = yaw;
+      this.cameraInfoHolder.pitch = pitch;
+      this.state = STATE.MOVE_CAMERA;
+    }
+    if (this.state === STATE.MOVE_CAMERA) {
+      const { width, height } = this.target.getBoundingClientRect();
+      const diffX = this.mousePosition.x - this.mouseDownPosition.x;
+      const diffY = this.mousePosition.y - this.mouseDownPosition.y;
+      const { aspect } = camera;
+      const vFov = camera.fov;
+      const hFov = vFov * aspect;
+      const degreeX = diffX / width * hFov;
+      const degreeY = diffY / height * vFov;
+      const { yaw, pitch } = this.cameraInfoHolder;
+      let targetPitch = parseFloat((pitch + degreeY).toFixed(2));
+      if (Math.abs(targetPitch) > 89.99) targetPitch = Math.sign(targetPitch) * 89.99;
+      let targetYaw = parseFloat(((yaw + degreeX + 360) % 360).toFixed(2));
+      if (targetYaw > 360 || targetYaw < 0) targetYaw = 0;
+      const { position } = Camera.getCameraLookAtPositionByYawPitch(
+        camera.position.clone(),
+        targetYaw,
+        targetPitch,
+      );
+      camera.lookAt(position);
+      camera.updateProjectionMatrix();
+      this.renderThisFrame = true;
+    }
+  }
+
+  /**
+   * 绑定视图
+   * @param view 需要绑定的CameraView
+   */
+  bindView(view: View): void {
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Renderer or Camera found in view');
+    }
+    const { THREE } = Externals.getInstance();
+    if (!(view.camera instanceof THREE.PerspectiveCamera)) {
+      throw new Error('PanoramaAdjustController only works with views with PerspectiveCamera');
+    }
+    this.view = view;
+    this.target = view.renderer.domElement;
+    if (this.activePanorama) {
+      this.bindElement(this.activePanorama);
+      this.setEnabled(true);
+    }
+  }
+
+  /**
+   * 绑定全景图元素
+   * @param element 设定控制器控制的全景图元素, 类型需要为Panorama
+   */
+  bindElement(element: Panorama): void {
+    this.activePanorama = element;
+    const { x, y, z } = this.activePanorama.position.clone();
+    if (this.view) this.view.camera!.position.set(x, y, z);
+    this.renderThisFrame = true;
+    this.setEnabled(true);
+  }
+
+  unbind(): void {
+    super.unbind();
+    this.setEnabled(false);
+  }
+
+  /** @ignore */
+  update(): boolean {
+    let result = true;
+    if (!this.enabled || !this.renderThisFrame) result = false;
+    this.renderThisFrame = false;
+    return result;
+  }
+
+  /**
+   * 启用/禁用该控制器
+   * @param enabled 目标值
+   */
+  setEnabled(enabled: boolean): void {
+    if (!this.target) return;
+    this.enabled = enabled;
+    if (enabled) {
+      Object.entries(this.listeners).forEach(([e, callback]) => {
+        this.target.addEventListener(e, callback);
+      });
+      this.renderThisFrame = true;
+    } else {
+      Object.entries(this.listeners).forEach(([e, callback]) => {
+        this.target.removeEventListener(e, callback);
+      });
+    }
+  }
+}
+
+export { PanoramaAdjustController };