@aibee/owlly 1.0.25

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

@@ -0,0 +1,155 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller, ListenerSet } from './controller';
+import { CameraView } from '../view/camera-view';
+import { Events } from '../utils/events';
+
+/** @ignore */
+enum STATE {
+  IDLE,
+  TO_MOVE_CAMERA,
+  MOVE_CAMERA
+}
+
+/**
+ * 相机元素控制器, 需要升级
+ */
+class CameraController extends Controller {
+  private enabled: boolean;
+
+  private view: CameraView;
+
+  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;
+
+  /**
+   * @param view 需要绑定的View
+   */
+  constructor(view: CameraView) {
+    super();
+    this.enabled = false;
+    const { THREE } = Externals.getInstance();
+    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.bindCameraView(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;
+    const camera = this.view.getActiveCamera();
+    if (!camera) return;
+    this.emit(Events.ELEMENT_POSE_UPDATED, camera.getQuaternion(), camera.getUUID());
+  }
+
+  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.getActiveCamera();
+    if (!camera) return;
+    if (this.state === STATE.TO_MOVE_CAMERA) {
+      this.cameraInfoHolder.yaw = camera.getYaw();
+      this.cameraInfoHolder.pitch = camera.getPitch();
+      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.getAspect();
+      const vFov = camera.getFov();
+      const hFov = vFov * aspect;
+      const degreeX = diffX / width * vFov;
+      const degreeY = diffY / height * hFov;
+      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;
+      camera.setYaw(targetYaw);
+      camera.setPitch(targetPitch);
+      this.renderThisFrame = true;
+    }
+  }
+
+  /**
+   * 绑定视图
+   * @param view 需要绑定的CameraView
+   */
+  bindCameraView(view: CameraView): void {
+    if (!view.renderer) {
+      throw new Error('No Renderer found in view');
+    }
+    this.view = view;
+    this.target = view.renderer.domElement;
+    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 { CameraController };

package/src/owlly/controller/controller.ts

@@ -0,0 +1,76 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from '../view/view';
+import { Element } from '../element/element';
+import { EventHubClassic } from '../utils/event-hub';
+import { Owlly } from '../stage/owlly';
+
+/**
+ * @ignore
+ */
+interface ListenerSet {
+  pointerdown(e: PointerEvent): void;
+  pointerup(e: PointerEvent): void;
+  pointerleave(e: PointerEvent): void;
+  pointermove(e: PointerEvent): void;
+}
+
+/**
+ * 控制器
+ */
+class Controller extends EventHubClassic {
+  constructor() {
+    super();
+    Owlly.GetSharedInstance().registerController(this);
+  }
+
+  /**
+   * @deprecated
+   * 解除当前绑定的视图
+   */
+  unbind(): void {
+    this.dispose();
+  }
+
+  dispose(): void {
+    this.eventMap.clear();
+    Owlly.GetSharedInstance().unregisterController(this);
+  }
+}
+
+interface Controller {
+  /**
+   * 绑定视图到当前控制器
+   * @param view 需要绑定的视图
+   */
+  bindView(view: View): void;
+  /**
+   * 解除当前绑定的视图
+   */
+  unbindView(): void;
+  /**
+   * @ignore
+   */
+  update(): boolean;
+  /**
+   * 绑定元素到当前控制器
+   * @param element 需要绑定的元素或元素数组
+   */
+  bindElement?(element: Element | Element[]): void;
+  /**
+   * 将目标元素解除绑定, 解除绑定的元素将不再被该控制器所管理
+   * @param element 需要解绑的元素或元素数组
+   */
+  unbindElement?(element: Element | Element[]): void;
+  /**
+   * 对于需要Scene的controller, 初始化时会传递scene
+   * @param scene 传入的Scene
+   */
+  initWithScene?(scene: NS_THREE.Scene): void;
+  /**
+   * 对于需要根据View变化的Controller, 使用该钩子函数进行处理
+   * @param view 当前view
+   */
+  renderingViewChanged?(view: View): void;
+}
+
+export { Controller, ListenerSet };

package/src/owlly/controller/index.ts

@@ -0,0 +1,15 @@
+export * from './controller';
+export * from './basic-controller';
+
+// 需要兼容的 Controller
+// export * from './panorama-controller';
+// export * from './transform-controller';
+// export * from './camera-controller';
+// export * from './mouse-indicator-controller';
+// export * from './aerial-element-controller';
+
+// 将被废弃的 Controller
+// export * from './orbit-control';
+// export * from './panorama-adjust-controller';
+// export * from './panorama-transform-controller';
+// export * from './plane-controller';

package/src/owlly/controller/mouse-indicator-controller.ts

@@ -0,0 +1,157 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller } from './controller';
+import { View } from '../view/view';
+import { FloorModel } from '../element/floor-model';
+
+/**
+ * 鼠标位置控制器, 用于展示鼠标位置, vr.aibee.cn
+ */
+class MouseIndicatorController extends Controller {
+  indicator: NS_THREE.Mesh;
+
+  indicatorUrl: string;
+
+  view: View;
+
+  target: FloorModel;
+
+  enabled: boolean;
+
+  scene: NS_THREE.Scene;
+
+  protected renderFrame: boolean;
+
+  protected mouseEventHandlers: {
+    // onPointerDown: (ev: MouseEvent) => void;
+    onPointerMove: (ev: MouseEvent) => void;
+    onPointerEnter: (ev: MouseEvent) => void;
+    onPointerLeave: (ev: MouseEvent) => void;
+    // onPointerUp: (ev: MouseEvent) => void;
+  };
+
+  constructor(indicatorUrl: string) {
+    super();
+    this.indicatorUrl = indicatorUrl;
+    this.mouseEventHandlers = {
+      // onPointerDown: (e): void => { this.onPointerDown(e); },
+      onPointerMove: (e): void => { this.onPointerMove(e); },
+      onPointerEnter: (): void => { this.onPointerEnter(); },
+      onPointerLeave: (): void => { this.onPointerLeave(); },
+      // onPointerUp: (): void => { this.onPointerUp(); },
+    };
+    this.enabled = true;
+  }
+
+  private onPointerEnter(): void {
+    if (!this.indicator) return;
+    this.indicator.visible = true;
+    (this.indicator.material as NS_THREE.MeshBasicMaterial).visible = true;
+  }
+
+  private onPointerLeave(): void {
+    if (!this.indicator) return;
+    this.indicator.visible = false;
+    (this.indicator.material as NS_THREE.MeshBasicMaterial).visible = false;
+  }
+
+  private onPointerMove(e: MouseEvent): void {
+    if (!this.enabled || !this.target || !this.view || !this.view.camera || !this.indicator) return;
+    const { clientX, clientY } = e;
+    const { clientWidth, clientHeight } = this.view.container;
+    const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+
+    const { THREE } = Externals.getInstance();
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera({ x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight }, this.view.camera);
+    const result = this.target.intersectRay(raycaster.ray.origin, raycaster.ray.direction, true);
+    if (result && result.length) {
+      const target = result[0];
+      if (target.triangle) {
+        const plane = new THREE.Plane().setFromCoplanarPoints(
+          target.triangle[0],
+          target.triangle[1],
+          target.triangle[2],
+        );
+        this.indicator.position.copy(target.intersectionPoint);
+        this.indicator.lookAt(target.intersectionPoint.clone().add(plane.normal.clone()));
+        this.renderFrame = true;
+      }
+    }
+  }
+
+  initWithScene(scene: NS_THREE.Scene): void {
+    const { THREE } = Externals.getInstance();
+    const geometry = new THREE.PlaneBufferGeometry(0.3, 0.3);
+    const texture = new THREE.TextureLoader().load(this.indicatorUrl);
+    const material = new THREE.MeshBasicMaterial({
+      depthTest: false,
+      depthWrite: false,
+      map: texture,
+      side: THREE.DoubleSide,
+      transparent: true,
+      visible: false,
+    });
+
+    this.indicator = new THREE.Mesh(geometry, material);
+    this.indicator.renderOrder = 999;
+    this.indicator.visible = false;
+    scene.add(this.indicator);
+    this.scene = scene;
+    this.renderFrame = true;
+  }
+
+  bindView(view: View): void {
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Camera or Renderer found in view');
+    }
+    this.view = view;
+    this.registerPointerEvents(view.container);
+  }
+
+  unbind(): void {
+    super.unbind();
+    if (this.scene && this.indicator) this.scene.remove(this.indicator);
+    this.unregisterPointerEvents(this.view.container);
+  }
+
+  update(): boolean {
+    const result = !!this.renderFrame;
+    this.renderFrame = false;
+    return result;
+  }
+
+  setTarget(target: FloorModel): void {
+    this.target = target;
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+    if (this.view) {
+      if (enabled) {
+        this.registerPointerEvents(this.view.container);
+      } else {
+        this.unregisterPointerEvents(this.view.container);
+      }
+    }
+  }
+
+  protected registerPointerEvents(dom: HTMLElement): void {
+    // dom.addEventListener('mousedown', this.mouseEventHandlers.onPointerDown);
+    dom.addEventListener('mousemove', this.mouseEventHandlers.onPointerMove);
+    dom.addEventListener('mouseenter', this.mouseEventHandlers.onPointerEnter);
+    dom.addEventListener('mouseleave', this.mouseEventHandlers.onPointerLeave);
+    // dom.addEventListener('mouseup', this.mouseEventHandlers.onPointerUp);
+  }
+
+  protected unregisterPointerEvents(dom: HTMLElement): void {
+    // dom.removeEventListener('mousedown', this.mouseEventHandlers.onPointerDown);
+    dom.removeEventListener('mousemove', this.mouseEventHandlers.onPointerMove);
+    dom.removeEventListener('mouseenter', this.mouseEventHandlers.onPointerEnter);
+    dom.removeEventListener('mouseleave', this.mouseEventHandlers.onPointerLeave);
+    // dom.removeEventListener('mouseup', this.mouseEventHandlers.onPointerUp);
+  }
+}
+
+export { MouseIndicatorController };

package/src/owlly/controller/orbit-control.ts

@@ -0,0 +1,310 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { OrbitControls } from '../../external/orbit-controls';
+import { Events } from '../utils/events';
+
+import { Controller } from './controller';
+import { View } from '../view/view';
+
+/**
+ * 使用Three.js OrbitControls实现的场景控制器
+ */
+class OrbitControl extends Controller {
+  public controls: OrbitControls;
+
+  protected renderFrame: boolean | undefined;
+
+  private view: View;
+
+  private enabled: boolean;
+
+  private box: NS_THREE.Box3;
+
+  private prevPosition: NS_THREE.Vector3;
+
+  /**
+   * @param view 需要绑定的View
+   */
+  constructor(view: View) {
+    super();
+    const { THREE } = Externals.getInstance();
+    if (view) this.bindView(view);
+    this.enabled = true;
+    this.prevPosition = new THREE.Vector3();
+  }
+
+  protected renderThisFrame(): void {
+    if (!this.renderFrame) {
+      this.renderFrame = true;
+    }
+  }
+
+  /**
+   * 绑定视图
+   * @param view 需要绑定的View
+   */
+  bindView(view: View): void {
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Camera or Renderer found in view');
+    }
+    this.view = view;
+    this.controls = new OrbitControls(view.camera as NS_THREE.PerspectiveCamera, view.container);
+    this.controls.addEventListener('start', () => { this.renderThisFrame(); });
+    this.controls.addEventListener('end', () => { this.renderThisFrame(); });
+    this.controls.addEventListener('change', () => {
+      this.emit(Events.ORBIT_CAMERA_CHANGED, view.camera!.position, view.camera!.quaternion, this);
+      if (this.box && !this.box.containsPoint(view.camera!.position)) {
+        const position = view.camera!.position.clone();
+        position.set(
+          Math.max(this.box.min.x + 1, Math.min(position.x, this.box.max.x - 1)),
+          Math.max(this.box.min.y + 1, Math.min(position.y, this.box.max.y - 1)),
+          Math.max(this.box.min.z + 1, Math.min(position.z, this.box.max.z - 1)),
+        );
+        if (this.prevPosition.distanceToSquared(position) > 0.01) {
+          this.prevPosition.copy(position);
+        }
+        this.setPosition(this.prevPosition.x, this.prevPosition.y);
+      }
+      this.renderThisFrame();
+    });
+    this.controls.update();
+  }
+
+  unbind(): void {
+    super.unbind();
+    this.controls.dispose();
+  }
+
+  /** @ignore */
+  update(): boolean {
+    this.controls.update();
+    const { renderFrame } = this;
+    this.renderFrame = undefined;
+    return !!renderFrame;
+  }
+
+  /**
+   * 设置视图中心点位
+   * @param x x
+   * @param y y
+   */
+  public setPosition(x: number, y: number): void {
+    const angle = this.controls.getAzimuthalAngle();
+    this.controls.object.position.set(x, y, this.controls.object.position.z);
+    this.controls.target.set(x, y, this.controls.target.z);
+    this.controls.update();
+    this.setCameraRotation(angle);
+  }
+
+  /**
+   * 设置键盘控制启用
+   * @param value 是否启用键盘控制
+   */
+  public setKeysEnabled(value: boolean): void {
+    this.controls.enableKeys = value;
+  }
+
+  /**
+   * 设置是否启用惯性
+   * @param value 开关值
+   */
+  public setDampingEnabled(value: boolean): void {
+    this.controls.enableDamping = value;
+  }
+
+  /**
+   * 设置位移速度
+   * @param value 位移速度
+   */
+  public setPanSpeed(value: number): void {
+    this.controls.panSpeed = value;
+  }
+
+  /**
+   * 设置是否启用旋转功能
+   * @param value 开关值
+   */
+  public setRotateEnabled(value: boolean): void {
+    this.controls.enableRotate = value;
+  }
+
+  /**
+   * 设置是否启用平移功能
+   * @param value 开关值
+   */
+  public setPanEnabled(value: boolean): void {
+    this.controls.enablePan = value;
+  }
+
+  /**
+   * 设置是否启用缩放功能
+   * @param value 开关值
+   */
+  public setZoomEnabled(value: boolean): void {
+    this.controls.enableZoom = value;
+  }
+
+  /**
+   * 设置是否启用该控制器
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    if (this.enabled === value) return;
+    this.enabled = value;
+    this.controls.enabled = this.enabled;
+  }
+
+  /**
+   * 设置惯性阻尼
+   * @param value 衰减值
+   */
+  public setDampingFactor(value: number): void {
+    this.controls.dampingFactor = value;
+  }
+
+  /**
+   * 设置触摸操作模式
+   * @param touches 触摸配置
+   */
+  public setTouchControls(touches: { ONE: NS_THREE.TOUCH; TWO: NS_THREE.TOUCH }): void {
+    this.controls.touches = touches;
+  }
+
+  /**
+   * 设置鼠标操作模式
+   * @param mouseButtons 鼠标按键配置
+   */
+  public setMouseControls(
+    mouseButtons: { LEFT: NS_THREE.MOUSE; MIDDLE: NS_THREE.MOUSE; RIGHT: NS_THREE.MOUSE },
+  ): void {
+    this.controls.mouseButtons = mouseButtons;
+  }
+
+  /**
+   * 设置控制中心点
+   * @param x 世界坐标X
+   * @param y 世界坐标Y
+   * @param z 世界坐标Z
+   */
+  public setTarget(x: number, y: number, z: number): void {
+    this.controls.target.set(x, y, z);
+    this.controls.update();
+  }
+
+  /**
+   * 设置纵向转动范围, 最低为0, 最高为Math.PI
+   * @param min 纵向转动范围最小值
+   * @param max 纵向转动范围最大值
+   */
+  public setPolarAngle(min: number, max: number): void {
+    this.controls.minPolarAngle = min;
+    this.controls.maxPolarAngle = max;
+  }
+
+  /**
+   * 设置zoom范围
+   * @param min zoom最小值
+   * @param max zoom最大值
+   */
+  public setZoomRange(min: number, max: number): void {
+    this.controls.minZoom = min;
+    this.controls.maxZoom = max;
+  }
+
+  /**
+   * 设置横向转动范围, 最低为-Math.PI, 最高为Math.PI
+   * @param min 横向转动范围最小值
+   * @param max 横向转动范围最大值
+   */
+  public setAzimuthAngle(min: number, max: number): void {
+    this.controls.minAzimuthAngle = min;
+    this.controls.maxAzimuthAngle = max;
+  }
+
+  /**
+   * 获取相机缩放
+   */
+  public getZoom(): number | null {
+    const { THREE } = Externals.getInstance();
+    if (
+      this.view.camera! instanceof THREE.PerspectiveCamera
+      || this.view.camera! instanceof THREE.OrthographicCamera
+    ) return this.view.camera.zoom;
+    return null;
+  }
+
+  /**
+   * 设置相机缩放
+   * @param zoom 目标缩放值
+   */
+  public setZoom(zoom: number): void {
+    const { THREE } = Externals.getInstance();
+    if (
+      !(this.view.camera! instanceof THREE.PerspectiveCamera)
+      && !(this.view.camera! instanceof THREE.OrthographicCamera)
+    ) throw new Error('Cannot set zoom for camera');
+    this.view.camera.zoom = zoom;
+    this.view.camera.updateProjectionMatrix();
+    this.renderFrame = true;
+  }
+
+  /**
+   * 获得相机旋转
+   * @returns 当前相机的旋转, 单位为弧度
+   */
+  public getCameraRotation(): number {
+    return this.controls.getAzimuthalAngle();
+  }
+
+  /**
+   * 设置相机的旋转
+   * @param radius 目标弧度
+   */
+  public setCameraRotation(radius: number): void {
+    const { minAzimuthAngle, maxAzimuthAngle } = this.controls;
+    this.setAzimuthAngle(radius, radius + 0.000001);
+    this.controls.update();
+    this.setAzimuthAngle(minAzimuthAngle, maxAzimuthAngle);
+    this.controls.update();
+    this.renderThisFrame();
+  }
+
+  /**
+   * 设置相机姿态
+   * @param worldMatrix 相机的姿态矩阵
+   */
+  public setCameraWorldMatrix(worldMatrix: number[]): void {
+    if (!this.view.camera) throw Error('Cannot set camera matrix to no-camera view.');
+    this.view.camera.matrixAutoUpdate = false;
+    const { THREE } = Externals.getInstance();
+    const position = new THREE.Vector3();
+    const scale = new THREE.Vector3();
+    const quaternion = new THREE.Quaternion();
+    const lookDistance = this.controls.object.position.distanceTo(this.controls.target);
+    new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+    this.view.camera.position.copy(position);
+    this.view.camera.scale.copy(scale);
+    this.view.camera.quaternion.copy(quaternion);
+    this.view.camera.updateMatrixWorld(true);
+    const lookVector = this.view.camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+    this.controls.target.copy(position.clone().add(lookVector.multiplyScalar(lookDistance)));
+    this.view.camera.matrixAutoUpdate = true;
+    const targetAngle = new THREE.Euler().setFromQuaternion(quaternion).z;
+    this.setCameraRotation(targetAngle);
+  }
+
+  /**
+   * 设置旋转速度
+   * @param speed 速度, 默认为1, 不传值时为重置为默认值
+   */
+  public setRotateSpeed(speed = 1): void {
+    if (!this.controls) return;
+    this.controls.rotateSpeed = speed;
+  }
+
+  public setPositionRange(min: NS_THREE.Vector3, max: NS_THREE.Vector3): void {
+    const { THREE } = Externals.getInstance();
+    this.box = new THREE.Box3(min, max);
+  }
+}
+
+export { OrbitControl };