mky-vent-5/src/views/vent/monitorManager/mainFanMonitor/mainWind.threejs.ts

import * as THREE from 'three';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import Smoke from '/@/views/vent/comment/threejs/Smoke';
import SmokePath from '/@/views/vent/comment/threejs/SmokePath';
import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';
import { Mesh } from 'three';
import { resolve } from 'path';
import Matching from '@zxcvbn-ts/core/dist/Matching';

class mainWindRect {
  model;
  modelName = 'main';
  group: THREE.Group | null = null; // 主通风机场景
  motorGroup1: THREE.Group | null = null; //电机
  motorGroup2: THREE.Group | null = null; //电机
  gearFront = {
    gear1: null, //扇叶
    gear2: null, //扇叶
    gear1Direction: -1,
    gear2Direction: 1,
    gearFrameId: undefined,
    gearRotateFactor: 0.5,
    endGearRotateFactor: 3,
  };
  gearBack = {
    gear1: null, //扇叶
    gear2: null, //扇叶
    gear1Direction: -1, // 扇叶转动方向
    gear2Direction: 1, // 扇叶转动方向
    gearFrameId: undefined,
    gearRotateFactor: 0.5, // 扇叶转动因素
    endGearRotateFactor: 3, // 扇叶最终转动速度因素
  };
  // smoke;
  frontSmoke; // 前面风流对象
  backSmoke; // 后面风流对象
  player1; // 视频播放器
  playerStartClickTime1 = new Date().getTime();
  frontWindowGroup;
  backWindowGroup;
  windowAngle = 0;

  constructor(model, playerVal1) {
    this.model = model;
    this.player1 = playerVal1;
  }
  // 添加 cssObject
  addCssText() {
    if (!this.group) {
      return;
    }
    if (!this.group.getObjectByName('monitorText1')) {
      const element = document.getElementById('inputBox') as HTMLElement;
      const mainCSS3D = new CSS3DObject(element);
      mainCSS3D.name = 'monitorText1';
      mainCSS3D.scale.set(0.08, 0.08, 0.08);
      mainCSS3D.position.set(23.78, 18.18, -6.85);
      mainCSS3D.lookAt(23.78, 20, -2.85);
      this.group.add(mainCSS3D);
    }
    if (!this.group.getObjectByName('monitorText2')) {
      const element = document.getElementById('inputBox1') as HTMLElement;
      const mainCSS3D = new CSS3DObject(element);
      mainCSS3D.name = 'monitorText2';
      mainCSS3D.scale.set(0.08, 0.08, 0.08);
      mainCSS3D.position.set(23.78, 18.18, 16.82);
      mainCSS3D.lookAt(23.78, 20, 20.82);
      this.group.add(mainCSS3D);
    }
  }

  addEcharts() {
    const echartsBox = document.getElementById('fan-echarts');
    if (echartsBox) {
      const canvasObj = echartsBox.getElementsByTagName('canvas')[0];
      // 将canvas 纹理转换为材质
      const echartsMap = new THREE.CanvasTexture(canvasObj); // 关键一步
      const echartsMaterial = new THREE.MeshBasicMaterial({
        map: echartsMap, // 设置纹理贴图
        transparent: true,
        side: THREE.FrontSide, // 这里是双面渲染的意思
      });
      echartsMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group?.getObjectByName('monitorEcharts');
      if (monitorPlane) {
        monitorPlane.material = echartsMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(17.6, 9.9); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, echartsMaterial);
        planeMesh.name = 'monitorEcharts';
        planeMesh.scale.set(1, 1, 1);
        planeMesh.position.set(-21.98, 9.027, -21.79);
        this.group?.add(planeMesh);
      }
    }
  }

  initAnimation() {}

  startAnimation() {}

  /* 更新动画 */
  render() {
    if (!this.model) {
      return;
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    // 判断是否点击到视频
    intersects.find((intersect) => {
      const mesh = intersect.object;
      if (mesh.name === 'player1') {
        if (new Date().getTime() - this.playerStartClickTime1 < 400) {
          // 双击，视频放大
          if (this.player1) {
            this.player1.requestFullscreen();
          }
        }
        this.playerStartClickTime1 = new Date().getTime();
        return true;
      }
      return false;
    });
  }

  mouseUpModel() {}

  /* 初始化气流 */
  initSmoke() {
    const frontPath = new THREE.CatmullRomCurve3([
      new THREE.Vector3(7.441, 0.806, 3.614),
      new THREE.Vector3(11.087, 0.806, 3.614),
      new THREE.Vector3(22.851, 0.806, 3.614),
      new THREE.Vector3(28.733, 0.806, 3.614),
      new THREE.Vector3(34.615, 0.806, 3.614),
      new THREE.Vector3(39.802, 0.806, 3.614),
      new THREE.Vector3(41.583, 1.485, 3.614),
      new THREE.Vector3(42.741, 3.364, 3.614),
      new THREE.Vector3(42.741, 7.998, 3.614),
      new THREE.Vector3(42.741, 12.633, 3.614),
      new THREE.Vector3(42.741, 17.267, 3.614),
    ]);
    this.frontSmoke = new SmokePath('/model/img/texture-smoke.png', '#ffffff', 0, 1, 0.7, 300, frontPath);
    this.frontSmoke.setPoints();
    this.frontSmoke.pointsMesh.position.set(0.33, 2.8, 8.04);
    this.group?.add(this.frontSmoke.pointsMesh);

    const backSmoke = new THREE.CatmullRomCurve3([
      new THREE.Vector3(7.441, 0.806, 3.614),
      new THREE.Vector3(11.087, 0.806, 3.614),
      new THREE.Vector3(22.851, 0.806, 3.614),
      new THREE.Vector3(28.733, 0.806, 3.614),
      new THREE.Vector3(34.615, 0.806, 3.614),
      new THREE.Vector3(39.802, 0.806, 3.614),
      new THREE.Vector3(41.583, 1.485, 3.614),
      new THREE.Vector3(42.741, 3.364, 3.614),
      new THREE.Vector3(42.741, 7.998, 3.614),
      new THREE.Vector3(42.741, 12.633, 3.614),
      new THREE.Vector3(42.741, 17.267, 3.614),
    ]);
    this.backSmoke = new SmokePath('/model/img/texture-smoke.png', '#ffffff', 0, 1, 0.7, 300, backSmoke);
    this.backSmoke.setPoints();
    this.backSmoke.pointsMesh.position.set(0.65, 2.77, -7.38);
    this.group?.add(this.backSmoke.pointsMesh);
  }

  async setDeviceFrequency(deviceType, state, frequencyVal?) {
    // 调节频率
    if (frequencyVal) {
      this.resetSmokeParam(deviceType, frequencyVal, 0);
    }
    this.openOrCloseValve(deviceType, state, 0);
    this.startGearAnimation(deviceType, state, '', 0);
    if (deviceType === 'front') {
      this.frontSmoke.startSmoke();
    } else {
      this.backSmoke.startSmoke();
    }
    setTimeout(() => {
      this.lookMotor(deviceType, state, 10);
    }, 2000);
  }

  async openDevice(deviceType, smokeDirection, frequencyVal, duration?) {
    if (smokeDirection) {
      this.setSmokeDirection(deviceType, smokeDirection);
    }
    let smoke;
    if (deviceType === 'front') {
      smoke = this.frontSmoke;
    } else {
      smoke = this.backSmoke;
    }
    if (!smoke.frameId) {
      await this.lookMotor(deviceType, 'open', duration);
      await this.openOrCloseValve(deviceType, 'open', duration);
      this.startGearAnimation(deviceType, 'open', smokeDirection, frequencyVal, duration);
      smoke.startSmoke(duration);
    }
  }

  async closeDevice(deviceType) {
    let smoke;
    if (deviceType === 'front') {
      smoke = this.frontSmoke;
    } else if (deviceType === 'back') {
      smoke = this.backSmoke;
    }
    if (smoke && smoke.frameId) {
      smoke.stopSmoke();
      await this.openOrCloseValve(deviceType, 'close');
      this.startGearAnimation(deviceType, 'close', '', null);
      await this.lookMotor(deviceType, 'close');
    }
  }

  async setSmokeDirection(deviceType, smokeDirection) {
    const _this = this;
    const tubPositivePath = [
      {
        path0: new THREE.Vector3(7.441, 0.806, 3.614),
        path1: new THREE.Vector3(41.583, 1.485, 3.614),
        isSpread: false,
        spreadDirection: 0, //
      },
      {
        path0: new THREE.Vector3(41.583, 1.485, 3.614),
        path1: new THREE.Vector3(42.741, 5.364, 3.614),
        isSpread: false,
        spreadDirection: 0,
      },
      {
        path0: new THREE.Vector3(42.741, 5.364, 3.614),
        path1: new THREE.Vector3(44.741, 17.267, 3.614),
        isSpread: true,
        spreadDirection: 1, // 1是由小变大，-1是由大变小
      },
    ];
    const tubInversePath = [
      {
        path0: new THREE.Vector3(44.741, 17.267, 3.614),
        path1: new THREE.Vector3(42.741, 5.364, 3.614),
        isSpread: true,
        spreadDirection: -1, //
      },
      {
        path0: new THREE.Vector3(42.741, 5.364, 3.614),
        path1: new THREE.Vector3(41.583, 1.485, 3.614),
        isSpread: false,
        spreadDirection: 0, //
      },
      {
        path0: new THREE.Vector3(41.583, 1.485, 3.614),
        path1: new THREE.Vector3(7.441, 0.806, 3.614),
        isSpread: false,
        spreadDirection: 0, // 1是由小变大，-1是由大变小
      },
    ];
    if (deviceType === 'front') {
      switch (smokeDirection) {
        case 'tubPositivePath': // 风筒正
          _this.frontSmoke.setPath(tubPositivePath);
          break;
        case 'tubInversePath': // 风筒反
          _this.frontSmoke.setPath(tubInversePath);
          break;
      }
    }
  }

  /* 播放气流动画 */
  /**
   *
   * @param controlType // 设备控制类型
   * @param deviceType //前后风机
   * @param frequencyVal // 风机运行频率
   * @param state // 打开、关闭状态
   */
  async playSmoke(controlType, deviceType, frequencyVal, state, smokeDirection) {
    if (frequencyVal) {
      this.resetSmokeParam(deviceType, frequencyVal);
    }
    if (controlType === 'startSmoke') {
      if (state === 'stop') {
        await this.closeDevice(deviceType);
      } else {
        // 开启时需要设置方向
        await this.openDevice(deviceType, smokeDirection, frequencyVal);
      }
    } else if (controlType === 'changeDirection') {
      // 改变扇叶转动方向、反风
      this.startGearAnimation(deviceType, 'changeDirection', smokeDirection, frequencyVal);
      let smoke;
      if (deviceType === 'front') {
        smoke = this.frontSmoke;
      } else {
        smoke = this.backSmoke;
      }
      if (smoke && smoke.frameId) {
        await smoke.stopSmoke();
        await this.setSmokeDirection(deviceType, smokeDirection);
        smoke.startSmoke();
      }
    } else if (controlType === 'frequency') {
      this.startGearAnimation(deviceType, 'frequency', smokeDirection, frequencyVal);
    } else if (controlType === 'initiatePlay') {
      this.openDevice(deviceType, smokeDirection, frequencyVal, 0);
    }
  }

  /* 打开或关闭蝶阀 */
  openOrCloseValve(deviceType, flag, duration = 3) {
    return new Promise((resolve) => {
      let diefa;
      if (deviceType == 'front') {
        diefa = this.group?.getObjectByName('butterfly_valve001') as THREE.Mesh;
      } else {
        diefa = this.group?.getObjectByName('butterfly_valve002') as THREE.Mesh;
      }
      let rotationY;
      if (flag == 'open') {
        rotationY = 0;
      } else {
        rotationY = Math.PI / 2;
      }
      gsap.to(diefa.rotation, {
        y: rotationY,
        duration: duration,
        ease: 'none',
        onComplete: function () {
          resolve(null);
        },
      });
    });
  }

  /* 风流调频, 范围1-50 */
  // opacityFactor (0.4 300)
  // life 最小 300， 最大 50
  // speedFactor 最大0， 最小100
  resetSmokeParam(deviceType, frequency, duration = 5) {
    if (frequency < 1) frequency = 1;
    if (frequency > 50) frequency = 50;
    let smoke;
    if (deviceType === 'front') {
      smoke = this.frontSmoke;
    } else {
      smoke = this.backSmoke;
    }
    const opacityFactor = (frequency / 50) * 0.8;
    duration = (Number(Math.abs(smoke.opacityFactor - opacityFactor).toFixed(1)) / 0.8) * 5;
    const life = (-250 / 50) * frequency + 300;
    gsap.to(smoke, {
      opacityFactor: opacityFactor,
      life: life,
      duration: duration,
      ease: 'easeInCirc',
      overwrite: true,
    });
  }

  /* 显示电机 */
  lookMotor(deviceType, flag, duration = 5) {
    return new Promise((resolve) => {
      let mesh, motorGroup;
      if (deviceType == 'front') {
        mesh = this.group?.getObjectByName('TWO02');
        motorGroup = this.motorGroup2;
      } else {
        mesh = this.group?.getObjectByName('ONE00');
        motorGroup = this.motorGroup1;
      }
      if (flag == 'open') {
        motorGroup.visible = true;
        mesh.material.transparent = true;
        mesh.material.depthWrite = false;
        mesh.material.depthTest = true;
        mesh.material.sizeAttenuation = true;
        gsap.to(mesh.material, {
          opacity: 0.015,
          duration: duration,
          overwrite: true,
          onComplete: function () {
            resolve(null);
          },
        });
      } else {
        gsap.to(mesh.material, {
          opacity: 1,
          duration: 1,
          overwrite: true,
          onComplete: function () {
            // resolve(null);
          },
        });
      }
    });
  }

  /* 齿轮转动动画 1 - 50  最大3 */
  startGearAnimation(deviceType, flag, smokeDirection, frequencyVal, duration = 8) {
    let gearObj, gearDirection;
    if (deviceType === 'front') {
      gearObj = this.gearFront;
    } else {
      gearObj = this.gearBack;
    }
    if (smokeDirection === 'tubPositivePath') {
      gearDirection = 1;
    } else if (smokeDirection === 'tubInversePath') {
      gearDirection = -1;
    }
    if (frequencyVal) {
      const endGearRotateFactor = (3 / 50) * frequencyVal;
      duration = (8 / 3) * Math.abs(gearObj.endGearRotateFactor - endGearRotateFactor);
      gearObj.endGearRotateFactor = endGearRotateFactor;
    }

    const gearAnimation = () => {
      gsap.to(gearObj, {
        gearRotateFactor: gearObj.endGearRotateFactor,
        duration: duration,
        ease: 'easeInCubic',
        repeat: 0,
        overwrite: true,
      });
      const clock = new THREE.Clock(); // 时钟
      const h = () => {
        gearObj.gearFrameId = requestAnimationFrame(h);

        const dt = clock.getDelta();
        gearObj.gear1.rotation.x += dt * gearObj.gearRotateFactor * gearObj.gear1Direction;
        gearObj.gear2.rotation.x += dt * gearObj.gearRotateFactor * gearObj.gear2Direction;
      };
      gearObj.gearFrameId = requestAnimationFrame(h);
    };
    if (flag === 'changeDirection') {
      if (gearDirection == -1 * gearObj.gear1Direction) {
        // 齿轮正在转，需要停止后再反方向转
        gsap.to(gearObj, {
          gearRotateFactor: 0,
          duration: duration,
          ease: 'easeInCubic',
          repeat: 0,
          onComplete: function () {
            window.cancelAnimationFrame(gearObj.gearFrameId);
            gearObj.gearFrameId = undefined;
            gearObj.gear1Direction = -1 * gearObj.gear1Direction;
            gearObj.gear2Direction = -1 * gearObj.gear2Direction;
            gearAnimation();
          },
        });
      }
    } else if (flag === 'open') {
      gearObj.gear1Direction = gearDirection;
      gearAnimation();
    } else if (flag === 'close') {
      gsap.to(gearObj, {
        gearRotateFactor: 0,
        duration: duration,
        ease: 'easeInCubic',
        repeat: 0,
        overwrite: true,
        onComplete: function () {
          window.cancelAnimationFrame(gearObj.gearFrameId);
          gearObj.gearFrameId = undefined;
        },
      });
    } else if (flag === 'frequency') {
      gsap.to(gearObj, {
        gearRotateFactor: gearObj.endGearRotateFactor,
        duration: duration,
        ease: 'easeInCubic',
        repeat: 0,
        overwrite: true,
      });
    }
  }

  /* 初始化口上面的气体 */
  initSmokeMass() {
    if (!this.frontSmoke) this.frontSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.4, 1.8, 100);
    if (!this.backSmoke) this.backSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.4, 1.8, 100);
  }

  /* 口上面的气体 */
  setSmokePosition() {
    this.frontSmoke.setPoints();
    this.group?.add(this.frontSmoke.points);
    this.frontSmoke.points.position.set(-2.51, 2.51, 8.18);
    this.backSmoke.setPoints();
    this.group?.add(this.backSmoke.points);
    // this.backSmoke.points.position.set(47.07, -8.48, -1.83);
  }

  /** 初始化电机 */
  async initMotor() {
    // 前电机
    const motorGltf1 = await this.model.setModel('dj1');
    this.motorGroup1 = motorGltf1.scene as THREE.Group;
    this.motorGroup1?.position.set(0, 0, 0);
    this.motorGroup1.visible = false;
    this.motorGroup1.traverse((item) => {
      if (item.name === 'fan_blade003') {
        // @ts-ignore
        this.gearBack.gear1 = item as THREE.Group;
      } else if (item.name === 'fan_blade005') {
        // @ts-ignore
        this.gearBack.gear2 = item as THREE.Group;
      }
    });
    this.group?.add(this.motorGroup1);

    // 后电机
    const motorGltf2 = await this.model.setModel('dj2');
    this.motorGroup2 = motorGltf2.scene as THREE.Group;
    this.motorGroup2?.position.set(0, 0, 0);
    this.motorGroup2.visible = false;
    this.motorGroup2.traverse((item) => {
      if (item.name === 'fan_blade007') {
        // @ts-ignore
        this.gearFront.gear1 = item as THREE.Group;
      } else if (item.name === 'fan_blade006') {
        // @ts-ignore
        this.gearFront.gear2 = item as THREE.Group;
      }
    });
    this.group?.add(this.motorGroup2);
  }

  openOrCloseWindow(flag) {
    const _this = this;
    let endAngle = 0;
    if (flag == 'openWindow') {
      // 打开风窗
      endAngle = 1;
    } else {
      // 关闭风窗
      endAngle = 0;
    }

    gsap.to(this, {
      windowAngle: endAngle,
      duration: Math.abs(endAngle - this.windowAngle) * 10,
      ease: 'none',
      onUpdate: function () {
        _this.frontWindowGroup.children.forEach((mesh) => {
          mesh.rotation.z = _this.windowAngle;
        });
      },
    });
  }

  /** 初始化风窗 */
  initWindow() {
    if (!this.group) return;
    this.frontWindowGroup = new THREE.Group();
    this.frontWindowGroup.name = 'frontWindowGroup';

    this.backWindowGroup = new THREE.Group();
    this.backWindowGroup.name = 'backWindowGroup';
    if (this.group && this.group?.children.length > 0) {
      for (let i = this.group?.children.length - 1; i >= 0; i--) {
        const obj = this.group?.children[i];
        if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('TC')) {
          const mesh = obj.clone();
          if (obj.name.startsWith('TC1')) {
            this.backWindowGroup.add(mesh);
          } else if (obj.name.startsWith('TC2')) {
            this.frontWindowGroup.add(mesh);
          }
          obj.removeFromParent();
          this.group?.remove(obj);
        }
      }
    }
    this.group?.add(this.backWindowGroup);
    this.group?.add(this.frontWindowGroup);
  }

  mountedThree() {
    return new Promise(async (resolve) => {
      this.model.setModel(this.modelName).then(async (gltf) => {
        this.group = gltf.scene;
        this.group?.position.set(-0.44, 29.88, 12.37);

        // this.initAnimation();
        // this.startAnimation()
        this.initSmokeMass();
        this.setSmokePosition();
        // this.startSmoke();
        // this.initSmoke();

        await this.initMotor();
        resolve(null);
        this.initWindow();
        this.openOrCloseWindow('openWindow');
        setTimeout(async () => {
          const videoPlayer1 = document.getElementById('main-player1')?.getElementsByClassName('vjs-tech')[0];
          if (videoPlayer1) {
            const mesh = renderVideo(this.group, videoPlayer1, 'player1');
            if (mesh) {
              mesh.scale.set(0.615, 0.57, 0.8);
              mesh.position.set(-43.783, 9.248, -21.78);
              this.group?.add(mesh);
            }
            videoPlayer1.addEventListener('fullscreen', (isFullscreen) => {
              if (isFullscreen) {
                this.model.orbitControls.enabled = false;
              } else {
                this.model.orbitControls.enabled = true;
              }
            });
          }
        }, 0);
      });
    });
  }

  destroy() {
    this.frontSmoke.clearSmoke();
    this.backSmoke.clearSmoke();

    this.model.clearGroup(this.motorGroup1);
    this.model.clearGroup(this.motorGroup2);
    this.model.clearGroup(this.group);

    this.gearFront.gear1?.geometry.dispose();
    this.gearFront.gear2?.geometry.dispose();
    this.gearFront.gear1?.material.dispose();
    this.gearFront.gear2?.material.dispose();

    this.gearBack.gear1?.geometry.dispose();
    this.gearBack.gear2?.geometry.dispose();
    this.gearBack.gear1?.material.dispose();
    this.gearBack.gear2?.material.dispose();

    this.model = null;
    this.group = null;
  }
}

export default mainWindRect;