@aibee/owlly 1.0.25

package/src/owlly/element/bottom-nav-element.ts

@@ -0,0 +1,352 @@
+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 BottomNavElement extends Element {
+  // 圆盘素材
+  public torus: NS_THREE.Mesh;
+
+  public centerArrowMesh: NS_THREE.Mesh;
+
+  // public textArrowMesh: NS_THREE.Mesh;
+
+  public textMeshMap: Map<string, {
+    mesh: NS_THREE.Mesh;
+    textWidth: number;
+    spacing: number;
+    spacingLeft: number;
+  }>;
+
+  private leftMeshGroup: NS_THREE.Mesh;
+
+  private centerMeshGroup: NS_THREE.Mesh;;
+
+  private rightMeshGroup: NS_THREE.Mesh;;
+
+  private textMeshGroup: groupData;
+
+  private textValuePre: string | number;
+  // 渲染控制属性
+
+  private enabled: boolean;
+
+  private initialized: boolean;
+
+  private needUpdate: boolean;
+
+  private viewWidth: number;
+
+  private viewHeight: number;
+
+  private bottomWidth: number;
+
+  private bottomRadius: number;
+
+  private directionPre: string;
+
+  private r: number;
+
+  private h: number;
+
+  // 交互属性
+
+  private isStop: boolean;
+
+  private angle: number;
+
+  private text: string;
+
+  private direction: string;
+
+  private maxLeftAngle: number; // 文字最大转动角度
+
+  private maxRightAngle: number; // 文字最大转动角度
+
+  constructor(option: {
+    centerArrowMesh: NS_THREE.Mesh;
+    // textArrowMesh?: NS_THREE.Mesh;
+    textMeshMap?: Map<string, {
+      mesh: NS_THREE.Mesh;
+      textWidth: number;
+      spacing: number;
+      spacingLeft: number;
+    }>;
+    maxLeftAngle?: number;
+    maxRightAngle?: number;
+    bottomWidth: number;
+    bottomRadius: number;
+  }) {
+    super();
+    const {
+      centerArrowMesh,
+      // textArrowMesh,
+      textMeshMap,
+      maxLeftAngle,
+      maxRightAngle,
+      bottomWidth,
+      bottomRadius,
+    } = option;
+
+    // this.textArrowMesh = textArrowMesh!;
+    // this.textArrowMesh.visible = false;
+    // this.torus.add(this.textArrowMesh);
+    this.enabled = true;
+
+    this.bottomWidth = bottomWidth;
+    this.bottomRadius = bottomRadius;
+    this.textMeshMap = textMeshMap!;
+    this.textValuePre = 0;
+    this.maxLeftAngle = maxLeftAngle || 0;
+    this.maxRightAngle = maxRightAngle || 0;
+
+    this.centerArrowMesh = centerArrowMesh.clone();
+    this.createBottomNav();
+    this.setRing(0, '定位中', 'center');
+
+    this.initialized = false;
+    this.needUpdate = true;
+    this.directionPre = 'center';
+  }
+
+  private createBottomNav(): void {
+    const material = new NS_THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      wireframe: false,
+      transparent: true,
+      blending: NS_THREE.CustomBlending,
+      blendSrc: NS_THREE.OneFactor,
+    });
+    material.needsUpdate = true;
+    material.visible = true;
+    material.opacity = 1;
+
+    const h = this.bottomWidth;
+    const r = this.bottomRadius;
+    const count = 128;
+    const points = [];
+    for (let i = 0; i < count; i++) {
+      const x = r * Math.sin(Math.PI * 2 * i / count);
+      const y = r * Math.cos(Math.PI * 2 * i / count);
+      if (i > count / 2) {
+        points.push(new NS_THREE.Vector2(x - h / 2, y));
+      } else {
+        points.push(new NS_THREE.Vector2(x + h / 2, y));
+      }
+    }
+
+    const heartShape = new NS_THREE.Shape(points);
+
+    const geometry = new NS_THREE.ShapeGeometry(heartShape);
+    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);
+  }
+
+  // 控制圆盘的偏移以及文字显示
+  public updateText(angle: number, value: string|number): void {
+    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') {
+      // debugger;
+      // 定位在左侧
+      if (textUpdate) {
+        if (this.textMeshGroup) this.torus.remove(this.textMeshGroup);
+        this.textMeshGroup = this.renderText(valueText, 0);
+        this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+        this.torus.add(this.textMeshGroup);
+      }
+    } else if (this.direction === 'right') {
+      // debugger;
+      // // 定位在右侧
+      if (textUpdate) {
+        if (this.textMeshGroup) this.torus.remove(this.textMeshGroup);
+        this.textMeshGroup = this.renderText(valueText, 0);
+        this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+        this.torus.add(this.textMeshGroup);
+      }
+    } else if (this.direction === 'center') {
+      // debugger;
+      if (!this.centerMeshGroup) {
+        // 文字
+        this.centerMeshGroup = this.centerArrowMesh;
+        this.centerMeshGroup.position.set(0, this.bottomRadius + 11, 3);
+        this.torus.add(this.centerMeshGroup);
+        // 对正
+        // this.centerMeshGroup.rotateZ(this.centerMeshGroup.groupOffsetAngle / 2);
+      }
+      this.centerMeshGroup.visible = true;
+      if (textUpdate) {
+        if (this.textMeshGroup) this.torus.remove(this.textMeshGroup);
+        this.textMeshGroup = this.renderText(valueText, 0);
+        this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+        this.torus.add(this.textMeshGroup);
+      }
+    } else if (this.direction === 'stop') {
+      if (textUpdate) {
+        if (this.textMeshGroup) this.torus.remove(this.textMeshGroup);
+        this.textMeshGroup = this.renderText(valueText, 0);
+        this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+        this.torus.add(this.textMeshGroup);
+      }
+    }
+  }
+
+  // 绘制文字
+  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;
+    }
+    // debugger;
+    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 = textMeshData.textWidth;
+      if (index === 0) firstAngle = radian;
+      if (index === textList.length - 1) lastAngle = radian;
+      groupOffsetAngle += radian / 2;
+      // 左间距
+      if (textMeshData.spacingLeft) {
+        const rad = textMeshData.spacingLeft / 2;
+        groupOffsetAngle += rad;
+      }
+      // 定位
+      textMesh.position.set(groupOffsetAngle, 0, 15);
+      // 横向偏移量累加
+      if (reverse) {
+        groupOffsetAngle -= radian / 2;
+      } else {
+        groupOffsetAngle += radian / 2;
+      }
+      // 右间距
+      if (textMeshData.spacing) {
+        const rad = textMeshData.spacing;
+        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 setOpacity(opacity: number): void {
+    this.torus.traverse((o) => {
+      const mesh = o as NS_THREE.Mesh;
+      if (mesh.isMesh && !Array.isArray(mesh.material)) {
+        mesh.material.blending = NS_THREE.CustomBlending;
+        mesh.material.blendSrc = NS_THREE.SrcAlphaFactor;
+        mesh.material.transparent = true;
+        mesh.material.opacity = opacity;
+      }
+    });
+  }
+
+  /**
+   * 设置是否更新
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+
+  play(): void {
+    this.isStop = false;
+  }
+
+  /*
+   暂停时隐藏箭头，角度锁定为0
+  */
+  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) {
+      this.updateText(-this.angle, this.text);
+    }
+
+    return frameContext;
+  }
+
+  dispose(): void {
+    this.torus.remove();
+
+    this.textMeshMap.clear();
+  }
+}
+
+export { BottomNavElement };