@aibee/owlly 1.0.25

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

@@ -0,0 +1,151 @@
+import { NS_THREE } from '../stage/externals';
+
+import { TransformControls } from '../../external/transform-controls';
+import { View } from '../view/view';
+import { Element } from '../element/element';
+import { Events } from '../utils/events';
+import { PanoramaController } from './panorama-controller';
+
+/**
+ * @deprecated
+ * 全景图下Element变换控制器, 即将弃用. 请使用 PanoramaController 与 TransformController
+ */
+class PanoramaTransformController extends PanoramaController {
+    private transformControl: TransformControls;
+
+    private scene: NS_THREE.Scene;
+
+    private activeElement: Element;
+
+    async unbind(): Promise<void> {
+      await super.unbind();
+      this.transformControl.dispose();
+    }
+
+    /** @ignore */
+    update(): boolean {
+      const render = super.update();
+      return render;
+    }
+
+    /**
+     * 绑定视图
+     * @param view 需要绑定的View
+     */
+    bindView(view: View): void {
+      super.bindView(view);
+      if (!view.camera || !view.renderer) {
+        throw new Error('No Camera or Renderer found in view');
+      }
+      this.transformControl = new TransformControls(view.camera, view.renderer.domElement);
+      this.transformControl.addEventListener('change', () => {
+        this.renderThisFrame();
+      });
+      this.transformControl.addEventListener('mouseUp', () => {
+        const mode = this.transformControl.getMode();
+        if (mode === 'translate') {
+          this.emit(
+            Events.ELEMENT_POSITION_UPDATED,
+            this.activeElement.position.clone(),
+            this.activeElement,
+          );
+        } else if (mode === 'rotate') {
+          this.emit(
+            Events.ELEMENT_POSE_UPDATED,
+            this.activeElement.quaternion.clone(),
+            this.activeElement,
+          );
+        } else if (mode === 'scale') {
+          // TODO(jyfang): do nothing now, add scale event
+        }
+      });
+      this.transformControl.addEventListener('dragging-changed', (event) => {
+        super.setEnabled(!event.value);
+      });
+    }
+
+    /** @ignore */
+    public initWithScene(scene: NS_THREE.Scene): void {
+      this.scene = scene;
+      this.scene.add(this.transformControl);
+    }
+
+    /**
+     * 将控制杆附着至元素
+     * @param element 需要调整的元素
+     */
+    public attach(element: Element): void {
+      if (this.activeElement) this.transformControl.detach();
+      this.transformControl.attach(element);
+      this.activeElement = element;
+    }
+
+    /**
+     * 解除控制杆
+     */
+    public detach(): void {
+      this.transformControl.detach();
+    }
+
+    /**
+     * 获取编辑模式
+     */
+    public getMode(): string {
+      return this.transformControl.getMode();
+    }
+
+    /**
+     * 设置编辑模式
+     * @param mode 编辑模式, 值为 "translate"(移动), "rotate"(旋转), "scale"(缩放) 其一.
+     */
+    public setMode(mode: string): void {
+      this.transformControl.setMode(mode);
+    }
+
+    /**
+     * 设置控制杆尺寸
+     * @param size 控制杆尺寸 默认为1
+     */
+    public setSize(size: number): void {
+      this.transformControl.setSize(size);
+    }
+
+    /**
+     * 设置X, Y, Z轴控制杆可见性
+     * @param x X轴控制杆可见性
+     * @param y Y轴控制杆可见性
+     * @param z Z轴控制杆可见性
+     */
+    public setStickVisibility(x: boolean, y: boolean, z: boolean): void {
+      this.transformControl.showX = x;
+      this.transformControl.showY = y;
+      this.transformControl.showZ = z;
+    }
+
+    /**
+     * 设置平移时移动的最小单位
+     * @param snap 移动最小单位, 默认值为null
+     */
+    public setTransitionSnap(snap: number | null): void {
+      this.transformControl.setTranslationSnap(snap);
+    }
+
+    /**
+     * 设置旋转时的最小旋转单位
+     * @param snap 旋转最小单位, 单位为弧度, 默认值为null
+     */
+    public setRotationSnap(snap: number | null): void {
+      this.transformControl.setRotationSnap(snap);
+    }
+
+    public setEnabled(value: boolean): void {
+      super.setEnabled(value);
+      if (this.transformControl) this.transformControl.enabled = value;
+    }
+
+    public attachedElement(): Element {
+      return this.activeElement;
+    }
+}
+
+export { PanoramaTransformController };

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

@@ -0,0 +1,222 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller } from './controller';
+import { View } from '../view/view';
+import { Events } from '../utils/events';
+
+/**
+ * @deprecated 将被废弃
+ */
+class PlaneController extends Controller {
+  private enabled: boolean;
+
+  private view: View;
+
+  private target: HTMLElement;
+
+  private renderThisFrame: boolean;
+
+  private rayCaster: NS_THREE.Raycaster;
+
+  private plane: NS_THREE.Plane;
+
+  private mouseDownHandler: {(event: MouseEvent): void};
+
+  private mouseUpHandler: {(event: MouseEvent): void};
+
+  private mouseMoveHandler: {(event: MouseEvent): void};
+
+  private touchEndHandler: {(event: TouchEvent): void};
+
+  private touchStartHandler: {(event: TouchEvent): void};
+
+  private touchMoveHandler: {(event: TouchEvent): void};
+
+  private touches: {
+    c: [NS_THREE.Vector2, NS_THREE.Vector2];
+    s: [NS_THREE.Vector2, NS_THREE.Vector2];
+    state: 'down'|'idle'|'move';
+  };
+
+  /**
+   * @param view 需要绑定的View
+   */
+  constructor(view: View) {
+    super();
+    this.enabled = false;
+    this.renderThisFrame = false;
+    const { THREE } = Externals.getInstance();
+
+    this.touches = {
+      s: [new THREE.Vector2(), new THREE.Vector2()],
+      c: [new THREE.Vector2(), new THREE.Vector2()],
+      state: 'idle',
+    };
+
+    this.mouseDownHandler = (event: MouseEvent): void => {
+      // this.mouseMovement = new THREE.Vector2(event.movementX, event.movementY).length();
+      this.touches.s[0] = new THREE.Vector2(event.clientX, event.clientY);
+      this.touches.state = 'down';
+    };
+    this.mouseMoveHandler = (event: MouseEvent): void => {
+      // this.mouseMovement += new THREE.Vector2(event.movementX, event.movementY).length();
+      this.touches.c[0] = new THREE.Vector2(event.clientX, event.clientY);
+      if (this.touches.state === 'down' && this.touches.c[0].distanceToSquared(this.touches.s[0]) > 100) {
+        this.touches.state = 'move';
+      }
+    };
+
+    this.mouseUpHandler = (event: MouseEvent): void => {
+      const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+
+      if (this.touches.state === 'down' && this.view.renderer) {
+        if (this.rayCaster) {
+          const { clientWidth, clientHeight } = this.view.renderer.domElement;
+          const x = (event.clientX - rectX) / clientWidth * 2 - 1;
+          const y = -(event.clientY - rectY) / clientHeight * 2 + 1;
+          this.rayCaster.setFromCamera({ x, y }, (this.view.camera as NS_THREE.Camera));
+          if (this.plane) {
+            const aim: NS_THREE.Vector3 = new THREE.Vector3();
+            const target = this.rayCaster.ray.intersectPlane(this.plane, aim);
+            if (target) {
+              this.emit(
+                Events.GET_PLANE_INTERSECT,
+                event,
+                target,
+              );
+            }
+          }
+        }
+      }
+    };
+
+    this.touchStartHandler = (event: TouchEvent): void => {
+      // event.preventDefault();
+      const l = event.touches.length;
+      this.touches.state = 'down';
+      for (let i = 0; i < Math.min(l, 2); i++) {
+        const t = event.touches[i];
+        this.touches.s[i] = new THREE.Vector2(t.clientX, t.clientY);
+      }
+    };
+
+    this.touchMoveHandler = (event: TouchEvent): void => {
+      if (this.touches.state === 'idle') return;
+      event.preventDefault();
+      event.stopPropagation();
+      const l = event.touches.length;
+      for (let i = 0; i < Math.min(l, 2); i++) {
+        const t = event.touches[i];
+        this.touches.c[i] = new THREE.Vector2(t.clientX, t.clientY);
+      }
+      if (this.touches.state === 'down' && this.touches.c[0].distanceToSquared(this.touches.s[0]) > 100) {
+        this.touches.state = 'move';
+      }
+    };
+
+    this.touchEndHandler = (event: TouchEvent): void => {
+      if (this.touches.state === 'idle') return;
+
+      if (this.touches.state === 'down' && this.view.renderer) {
+        const touchPoint = new THREE.Vector2(this.touches.s[0].x, this.touches.s[0].y);
+        const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+        const { clientWidth, clientHeight } = this.view.renderer.domElement;
+        const x = (touchPoint.x - rectX) / clientWidth * 2 - 1;
+        const y = -(touchPoint.y - rectY) / clientHeight * 2 + 1;
+        if (this.rayCaster) {
+          this.rayCaster.setFromCamera({ x, y }, (this.view.camera as NS_THREE.Camera));
+          if (this.plane) {
+            const target = this.rayCaster.ray.intersectPlane(this.plane, new THREE.Vector3());
+            if (target) {
+              this.emit(
+                Events.GET_PLANE_INTERSECT,
+                event,
+                target,
+              );
+            }
+          }
+        }
+      }
+      this.touches.state = 'idle';
+    };
+
+    this.rayCaster = new THREE.Raycaster();
+    if (view) this.bindView(view);
+  }
+
+  public setPlane(plane: NS_THREE.Plane): void{
+    this.plane = plane;
+  }
+
+  /**
+   * 绑定视图
+   * @param view 需要绑定的View
+   */
+  bindView(view: View): void {
+    if (!view.renderer) {
+      throw new Error('No Renderer found in view');
+    }
+    this.view = view;
+    this.target = view.renderer.domElement;
+    this.setEnabled(true);
+  }
+
+  public setMouseClickEnabled(enable: boolean): boolean {
+    if (!this.view.renderer) return false;
+    if (enable) {
+      this.view.renderer.domElement.addEventListener('mouseup', this.mouseUpHandler);
+      this.view.renderer.domElement.addEventListener('mousedown', this.mouseDownHandler);
+      this.view.renderer.domElement.addEventListener('mousemove', this.mouseMoveHandler);
+    } else {
+      this.view.renderer.domElement.removeEventListener('mouseup', this.mouseUpHandler);
+      this.view.renderer.domElement.removeEventListener('mousedown', this.mouseDownHandler);
+      this.view.renderer.domElement.removeEventListener('mousemove', this.mouseMoveHandler);
+    }
+    return true;
+  }
+
+  unbind(): void {
+    super.unbind();
+    this.setEnabled(false);
+    this.dispose();
+  }
+
+  /** @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;
+    this.setMouseClickEnabled(enabled);
+    this.setTouchEnabled(enabled);
+  }
+
+  public setTouchEnabled(enable: boolean): boolean {
+    if (!this.view.renderer) return false;
+    if (enable) {
+      this.view.renderer.domElement.addEventListener('touchstart', this.touchStartHandler, false);
+      this.view.renderer.domElement.addEventListener('touchmove', this.touchMoveHandler, false);
+      this.view.renderer.domElement.addEventListener('touchend', this.touchEndHandler, false);
+    } else {
+      this.view.renderer.domElement.removeEventListener('touchstart', this.touchStartHandler);
+      this.view.renderer.domElement.removeEventListener('touchmove', this.touchMoveHandler);
+      this.view.renderer.domElement.removeEventListener('touchend', this.touchEndHandler);
+    }
+    return true;
+  }
+
+  public dispose(): void {
+    this.setMouseClickEnabled(false);
+    this.setTouchEnabled(false);
+  }
+}
+
+export { PlaneController };