@aibee/owlly 1.0.25

package/src/owlly/element/ring-element.ts

@@ -0,0 +1,517 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+
+// eslint-disable-next-line @typescript-eslint/class-name-casing
+interface groupData extends NS_THREE.Group {
+  groupOffsetAngle: number;
+  lastAngle: number;
+  firstAngle: number;
+}
+
+class RingElement extends Element {
+  // 圆盘素材
+  public torus: NS_THREE.Mesh;
+
+  public downArrow: NS_THREE.Mesh;
+
+  public textArrowMesh: NS_THREE.Mesh;
+
+  public tubeMesh: NS_THREE.Mesh;
+
+  public signMesh: NS_THREE.Mesh;
+
+  public downMesh: NS_THREE.Mesh; // 下拉图标
+
+  public tubeRadius: number;
+
+  public textMeshMap: Map<string, {
+    mesh: NS_THREE.Mesh;
+    textWidth: number;
+    spacing: number;
+    spacingLeft: number;
+  }>;
+
+  private leftMeshGroup: groupData;
+
+  private centerMeshGroup: groupData;
+
+  private rightMeshGroup: groupData;
+
+  private leftTextMeshGroup: groupData;
+
+  private rightTextMeshGroup: groupData;
+
+  private maskCenterMesh: NS_THREE.Mesh;
+
+  private textValuePre: string | number;
+  // 渲染控制属性
+
+  private initialized: boolean;
+
+  private needUpdate: boolean;
+
+  private viewWidth: number;
+
+  private viewHeight: number;
+
+  private enabled: boolean;
+
+  private directionPre: string;
+
+  // 圆盘属性
+
+  private innerRadius: number;
+
+  private outerRadius: number;
+
+  // 交互属性
+
+  private showTopArrow: boolean;
+
+  private isStop: boolean;
+
+  private angle: number;
+
+  private text: string;
+
+  private direction: string;
+
+  private navRadius: number;
+
+  private maxLeftAngle: number; // 文字最大转动角度
+
+  private maxRightAngle: number; // 文字最大转动角度
+
+  constructor(option: {
+    innerRadius: number;
+    outerRadius: number;
+    textArrowMesh?: NS_THREE.Mesh;
+    tubeMesh?: NS_THREE.Mesh;
+    tubeRadius?: number;
+    downMesh?: NS_THREE.Mesh;
+    signMesh?: NS_THREE.Mesh;
+    textMeshMap?: Map<string, {
+      mesh: NS_THREE.Mesh;
+      textWidth: number;
+      spacing: number;
+      spacingLeft: number;
+    }>;
+    maxLeftAngle?: number;
+    maxRightAngle?: number;
+  }) {
+    super();
+    const {
+      innerRadius,
+      outerRadius,
+      tubeRadius,
+      textArrowMesh,
+      signMesh,
+      textMeshMap,
+      maxLeftAngle,
+      maxRightAngle,
+      downMesh,
+    } = option;
+
+    const geometry = new NS_THREE.RingGeometry(innerRadius, outerRadius, 540, 1);
+    const material = new NS_THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      wireframe: false,
+      blending: NS_THREE.CustomBlending,
+      blendSrc: NS_THREE.OneFactor,
+      // blending: NS_THREE.CustomBlending,
+      // blendSrc: NS_THREE.OneFactor,
+    });
+    material.needsUpdate = true;
+    material.visible = true;
+    material.opacity = 1;
+    this.torus = new NS_THREE.Mesh(geometry, material);
+    this.torus.position.set(0, 0, 1);
+    this.torus.lookAt(0, 0, 1);
+    this.add(this.torus);
+
+    this.enabled = true;
+    this.textArrowMesh = textArrowMesh!;
+    this.textArrowMesh.visible = false;
+    this.signMesh = signMesh!;
+    this.signMesh.visible = false;
+    this.downMesh = downMesh!;
+    this.downMesh.visible = true;
+    this.torus.add(this.textArrowMesh);
+    this.textMeshMap = textMeshMap!;
+    this.textValuePre = 0;
+    this.tubeRadius = tubeRadius || 0;
+    this.maxLeftAngle = maxLeftAngle || 0;
+    this.maxRightAngle = maxRightAngle || 0;
+    this.setRing(0, '123米', 'center');
+    // console.log(this.textArrowMesh, this.textMeshMap);
+    // this.createImage(r + d / 2, d, torus);
+    // this.createText(r + d / 2, d, torus);
+    const r = innerRadius;
+    const d = outerRadius - innerRadius;
+    this.innerRadius = innerRadius;
+    this.outerRadius = outerRadius;
+    this.navRadius = r + d / 2;
+    this.createMask(innerRadius, outerRadius);
+    this.createSign(innerRadius, d);
+    this.createDown(innerRadius);
+    this.initialized = false;
+    this.needUpdate = true;
+    this.directionPre = 'center';
+  }
+
+  // 刻度线
+  private createSign(r: number, d: number): void {
+    for (let angle = 0; angle < 2 * Math.PI; angle += Math.PI / 180) {
+      const sx = Math.cos(angle) * (r + d / 2);
+      const sy = Math.sin(angle) * (r + d / 2);
+
+      const p = {
+        x: sy,
+        y: sx,
+      };
+      // 刻度线
+      const lineMesh = this.signMesh.clone();
+      lineMesh.position.set(p.x, p.y, 2);
+      lineMesh.lookAt(0, 0, 1);
+      if (angle < Math.PI) {
+        lineMesh.rotateY(Math.PI / 2);
+      } else {
+        lineMesh.rotateY(-Math.PI / 2);
+      }
+      lineMesh.visible = true;
+      this.torus.add(lineMesh);
+    }
+  }
+
+  private createDown(r: number): void {
+    const downMesh = this.downMesh.clone();
+    downMesh.position.set(0, r - 10, 10);
+    this.downArrow = downMesh;
+    this.add(downMesh);
+  }
+
+  // 文字后面遮罩层
+  private createMask(r: number, d: number): void {
+    const material = new NS_THREE.MeshBasicMaterial({
+      transparent: true,
+      blending: NS_THREE.CustomBlending,
+      blendSrc: NS_THREE.OneFactor,
+      color: 0xffffff,
+    });
+    const geometry = new NS_THREE.RingGeometry(r + d / 2, r - d / 2, 540, 1, Math.PI / 2, Math.PI / 18);
+    this.maskCenterMesh = new NS_THREE.Mesh(geometry, material);
+    this.maskCenterMesh.position.set(0, 0, 3);
+    // this.maskCenterMesh.lookAt(0, 0, 1);
+    // 中心遮罩跟随圆动，两边的固定在左右
+    this.torus.add(this.maskCenterMesh);
+  }
+
+  // 控制圆盘的偏移以及文字显示
+  public updateText(angle: number, value: string|number): void {
+    // 计算偏移量
+    let torusOffsetAngle = angle;
+    if (this.isStop) {
+      torusOffsetAngle = 0;
+      this.direction = 'center';
+    }
+    if (this.direction === 'left') {
+      torusOffsetAngle = -this.maxLeftAngle;
+    }
+    if (this.direction === 'right') {
+      torusOffsetAngle = -this.maxRightAngle;
+    }
+
+    if (this.leftMeshGroup) this.leftMeshGroup.visible = false;
+    if (this.centerMeshGroup) this.centerMeshGroup.visible = false;
+    if (this.rightMeshGroup) this.rightMeshGroup.visible = false;
+    if (this.textArrowMesh) this.textArrowMesh.visible = false;
+
+    // 分别处理左、右、中
+    const valueText = [];
+    valueText.push(...value.toString());
+    // 判断是否更新文字
+    let textUpdate = false;
+    if (this.textValuePre !== value) {
+      textUpdate = true;
+    }
+    if (this.directionPre !== this.direction) {
+      textUpdate = true;
+    }
+    this.textValuePre = value;
+    this.directionPre = this.direction;
+    if (this.direction === 'left') {
+      // 定位在左侧
+      if (!this.leftMeshGroup) {
+        this.leftMeshGroup = this.renderText('ls'.split(''));
+        this.torus.add(this.leftMeshGroup);
+      }
+      if (textUpdate) {
+        if (this.leftTextMeshGroup) this.leftMeshGroup.remove(this.leftTextMeshGroup);
+        this.leftTextMeshGroup = this.renderText(valueText, this.leftMeshGroup.groupOffsetAngle);
+        this.leftMeshGroup.add(this.leftTextMeshGroup);
+        // 更新遮罩层
+        if (this.maskCenterMesh && textUpdate) {
+          const g = this.maskCenterMesh.geometry;
+          const geometry = new NS_THREE.RingGeometry(this.innerRadius,
+            this.outerRadius,
+            60,
+            1,
+            0,
+            this.leftTextMeshGroup.groupOffsetAngle - this.leftTextMeshGroup.lastAngle / 2);
+          this.maskCenterMesh.geometry = geometry;
+          setTimeout(() => {
+            g.dispose();
+          });
+        }
+      }
+
+      // 最大左偏移量
+      // let maxLeftAngleOffset = 0;
+      // if (torusOffsetAngle < -this.maxLeftAngle) {
+      //   maxLeftAngleOffset = torusOffsetAngle + this.maxLeftAngle;
+      //   this.leftMeshGroup.rotation.z = maxLeftAngleOffset;
+      // }
+      if (this.maskCenterMesh) {
+        this.maskCenterMesh.rotation.z = Math.PI / 2
+          - this.leftTextMeshGroup.groupOffsetAngle
+          + this.leftTextMeshGroup.lastAngle / 2;
+        // + maxLeftAngleOffset;
+      }
+      this.leftMeshGroup.visible = true;
+    } else if (this.direction === 'right') {
+      // // 定位在右侧
+      if (!this.rightMeshGroup) {
+        this.rightMeshGroup = this.renderText('sr'.split(''), 0, true);
+        this.torus.add(this.rightMeshGroup);
+      }
+
+      if (textUpdate) {
+        if (this.rightTextMeshGroup) this.rightMeshGroup.remove(this.rightTextMeshGroup);
+        this.rightTextMeshGroup = this.renderText(valueText, this.rightMeshGroup.groupOffsetAngle, true);
+        // // 减去上面的旋转量，以适应文字变化
+        this.rightMeshGroup.add(this.rightTextMeshGroup);
+      }
+      this.rightMeshGroup.visible = true;
+      // 最大右偏移量
+      // let maxRightAngleOffset = 0;
+      // if (torusOffsetAngle > -this.maxRightAngle) {
+      //   maxRightAngleOffset = torusOffsetAngle + this.maxRightAngle;
+      //   this.rightMeshGroup.rotation.z = maxRightAngleOffset;
+      // }
+      // 更新遮罩层
+      if (this.maskCenterMesh && textUpdate) {
+        const g = this.maskCenterMesh.geometry;
+        const geometry = new NS_THREE.RingGeometry(this.innerRadius,
+          this.outerRadius,
+          60,
+          1,
+          0,
+          this.rightTextMeshGroup.groupOffsetAngle - this.rightTextMeshGroup.firstAngle / 2);
+        this.maskCenterMesh.geometry = geometry;
+        this.maskCenterMesh.rotation.z = Math.PI / 2;
+        setTimeout(() => {
+          g.dispose();
+        });
+      }
+    } else if (this.direction === 'center') {
+      if (textUpdate) {
+        // 文字
+        if (this.centerMeshGroup) this.torus.remove(this.centerMeshGroup);
+        this.centerMeshGroup = this.renderText(valueText);
+        this.torus.add(this.centerMeshGroup);
+        // 对正
+        this.centerMeshGroup.rotateZ(this.centerMeshGroup.groupOffsetAngle / 2);
+      }
+      this.centerMeshGroup.visible = true;
+      // 到终点达，和全屏，隐藏箭头
+      if (this.isStop || !this.showTopArrow) {
+        this.textArrowMesh.visible = false;
+      } else {
+        // 顶部箭头
+        this.textArrowMesh.visible = true;
+        this.textArrowMesh.position.set(0, this.innerRadius + this.tubeRadius, 5); // 部分在圆里
+      }
+      // 更新遮罩层
+      if (this.maskCenterMesh && textUpdate) {
+        const g = this.maskCenterMesh.geometry;
+        const geometry = new NS_THREE.RingGeometry(this.innerRadius,
+          this.outerRadius,
+          60,
+          1,
+          0,
+          this.centerMeshGroup.groupOffsetAngle
+          - this.centerMeshGroup.firstAngle / 2
+          - this.centerMeshGroup.lastAngle / 2);
+        this.maskCenterMesh.geometry = geometry;
+
+        this.maskCenterMesh.rotation.z = Math.PI / 2
+        - this.centerMeshGroup.groupOffsetAngle / 2
+        + this.centerMeshGroup.lastAngle / 2;
+        setTimeout(() => {
+          g.dispose();
+        });
+      }
+    }
+    if (this.isStop) {
+      this.torus.rotation.z = 0;
+    } else {
+      this.torus.rotation.z = -torusOffsetAngle;
+    }
+  }
+
+  // 绘制文字
+  private renderText(values: Array<string>, angle = 0, reverse = false): groupData {
+    const textList = reverse ? values.reverse() : values;
+    // 弧度累计
+    let groupOffsetAngle = 0;
+    if (reverse) {
+      groupOffsetAngle = -angle;
+    } else {
+      groupOffsetAngle = angle;
+    }
+
+    const textMeshGroup = new NS_THREE.Group() as groupData;
+    let firstAngle = 0;
+    let lastAngle = 0;
+
+    textList.forEach((item, index) => {
+      const textMeshData = this.textMeshMap.get(item);
+      if (!textMeshData) return;
+      const textMesh = textMeshData.mesh.clone();
+      // textMesh.material.visible = true;
+
+      // 文字自身宽度
+      const radian = index === 0
+        ? Math.asin(textMeshData.textWidth / 2 / this.navRadius) * 2
+        : Math.asin(textMeshData.textWidth / 2 / this.navRadius) * 2;
+      if (index === 0) firstAngle = radian;
+      if (index === textList.length - 1) lastAngle = radian;
+      if (reverse) {
+        groupOffsetAngle -= radian / 2;
+      } else {
+        groupOffsetAngle += radian / 2;
+      }
+      // 左间距
+      if (textMeshData.spacingLeft) {
+        const rad = Math.asin(textMeshData.spacingLeft / 2 / this.navRadius) * 2;
+        if (reverse) {
+          groupOffsetAngle -= rad;
+        } else {
+          groupOffsetAngle += rad;
+        }
+      }
+      // 定位
+      const r = this.navRadius;
+      const x = r * Math.sin(groupOffsetAngle);
+      const y = r * Math.cos(groupOffsetAngle);
+      textMesh.position.set(x, y, 15);
+      // 旋转
+      textMesh.rotateZ(-groupOffsetAngle);
+      // 横向偏移量累加
+      if (reverse) {
+        groupOffsetAngle -= radian / 2;
+      } else {
+        groupOffsetAngle += radian / 2;
+      }
+      // 右间距
+      if (textMeshData.spacing) {
+        const rad = Math.asin(textMeshData.spacing / 2 / this.navRadius) * 2;
+        if (reverse) {
+          groupOffsetAngle -= rad;
+        } else {
+          groupOffsetAngle += rad;
+        }
+      }
+      textMeshGroup.add(textMesh);
+    });
+    // 文字整体弧度
+    textMeshGroup.groupOffsetAngle = Math.abs(groupOffsetAngle);
+    textMeshGroup.lastAngle = lastAngle;
+    textMeshGroup.firstAngle = firstAngle;
+    return textMeshGroup;
+  }
+
+  public setDirection(direction: string): void {
+    this.direction = direction;
+  }
+
+  public setAngle(angle: number): void {
+    this.angle = angle;
+  }
+
+  public setText(text: string): void {
+    this.text = text;
+  }
+
+  public setRing(angle: number, text: string, direction = 'center'): void {
+    this.setAngle(angle);
+    this.setText(text);
+    this.setDirection(direction);
+  }
+
+  public setToursPosition(x: number, y: number, z: number): void {
+    this.torus.position.set(x, y, z);
+  }
+
+  public setTopArrowVisible(visible: boolean): void {
+    this.showTopArrow = visible;
+  }
+
+  /**
+   * 设置是否更新
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+
+  play(): void {
+    this.isStop = false;
+  }
+
+  /*
+   暂停时隐藏箭头，角度锁定为0
+  */
+  stop(): void {
+    this.isStop = true;
+  }
+
+  public resize(width: number, height: number): void {
+    if (this.viewWidth === width && this.viewHeight === height) return;
+    this.viewWidth = width;
+    this.viewHeight = height;
+  }
+
+  update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    frameContext.needUpdate = this.needUpdate;
+    // 添加圆盘
+    if (!this.initialized && this.torus) {
+      frameContext.shouldPlaceElement = true;
+      this.initialized = true;
+    }
+    if (this.enabled) {
+      // console.log('update');
+      this.updateText(-this.angle, this.text);
+    }
+
+    // if (this.isStop) {
+    //   this.torus.rotation.z = 0;
+    // } else {
+    //   // this.torus.rotateZ(torusOffsetAngle);
+    //   this.torus.rotation.z = this.angle;
+    // }
+    // if (this.visible) {
+    //   frameContext.needUpdate = true;
+    // }
+    return frameContext;
+  }
+
+  dispose(): void {
+    this.torus.remove();
+
+    this.textMeshMap.clear();
+  }
+}
+
+export { RingElement };

package/src/owlly/element/sphere-mesh.ts

@@ -0,0 +1,96 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { View } from '../view/view';
+// import { EventHub } from '../utils/event-hub';
+// import { OwllyEvents } from '../utils/events';
+
+class SphereMesh extends Element {
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  private group: NS_THREE.Group;
+
+  private eventListeners: { onCurrentViewChanged: (view: View) => void };
+
+  /**
+   * @param radius 半径
+   * @param optionalParams 可选参数，包括是否可见、颜色等等
+   * @example ```
+   * const sphere = new SphereMesh(0.1, { fillColor: 0x00ffff, hidden: true });
+   * sphere.position.set(0, 0, 0);
+   * stage.bindElement(sphere);
+   * ```
+   */
+  constructor(
+    radius: number,
+    optionalParams?: {
+      hidden?: boolean;
+      material?: NS_THREE.Material;
+      fillColor?: NS_THREE.Color | string | number;
+      opacity?: number;
+    },
+  ) {
+    super();
+    const { THREE } = Externals.getInstance();
+    const options = optionalParams || {};
+
+    this.group = new THREE.Group();
+    this.add(this.group);
+
+    const material = options.material || new THREE.MeshBasicMaterial({
+      color: options.fillColor ? options.fillColor : 0x00ff00,
+      transparent: true,
+      opacity: options.opacity !== undefined ? options.opacity : 1,
+      side: THREE.DoubleSide,
+      depthWrite: true,
+    });
+    if (options.hidden === false) {
+      material.visible = false;
+    }
+
+    const geometry = new THREE.SphereGeometry(radius, 60, 40);
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.renderOrder = 1000;
+    this.group.add(mesh);
+
+    this.initialized = false;
+    this.loaded = true;
+  }
+
+  public setOnCurrentViewChanged(func: (view: View) => void): void {
+    // if (this.eventListeners && this.eventListeners.onCurrentViewChanged) {
+    //   EventHub.off(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+    // }
+    this.eventListeners = {
+      onCurrentViewChanged: func,
+    };
+    // EventHub.on(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+  }
+
+  // renderingViewChanged(view: View): void {
+  //   if (this.eventListeners && this.eventListeners.onCurrentViewChanged) {
+  //     this.eventListeners.onCurrentViewChanged(view);
+  //   }
+  // }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loaded) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    BasicTools.dispose(this, true);
+  }
+}
+
+export { SphereMesh };