gas-injection/src/views/vent/monitorManager/windrectMonitor/duishe.threejs.ts

import * as THREE from 'three';

import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';
// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

class dsWindRect {
  model;
  modelName = 'dscf';
  group: THREE.Object3D = new THREE.Object3D();
  deviceType;
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  player1;
  playerStartClickTime1 = new Date().getTime();
  lineLight;
  isRun = false;

  constructor(model) {
    this.model = model;
    this.group.name = this.modelName;
  }
  setModelType(deviceType) {
    this.deviceType = deviceType;
    const dsgdObj = this.group.getObjectByName('dsgd');
    const dsmoveObj = this.group.getObjectByName('dsmove');

    if (deviceType == 'move') {
      if (dsgdObj) dsgdObj.visible = false;
      if (dsmoveObj) dsmoveObj.visible = true;
    } else {
      if (dsgdObj) dsgdObj.visible = true;
      if (dsmoveObj) dsmoveObj.visible = false;
      if (deviceType == 'four' && dsgdObj) {
        dsgdObj.getObjectByName('fout_ceasourment_01').visible = true;
      }
      if (deviceType == 'two' && dsgdObj) {
        dsgdObj.getObjectByName('fout_ceasourment_01').visible = false;
      }
    }
  }

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(42.4, 248, 86);
    this.group.add(directionalLight);
    directionalLight.target = this.group;

    // gui.add(directionalLight.position, 'x', -500, 500);
    // gui.add(directionalLight.position, 'y', -500, 500);
    // gui.add(directionalLight.position, 'z', -500, 500);

    const spotLight = new THREE.SpotLight();
    spotLight.angle = Math.PI / 16;
    spotLight.penumbra = 0;
    spotLight.castShadow = true;
    spotLight.distance = 0;
    spotLight.position.set(-470, -500, 500);
    this.group.add(spotLight);

    spotLight.shadow.camera.near = 0.5; // default
    spotLight.shadow.camera.far = 1000; // default
    spotLight.shadow.focus = 1;
    spotLight.shadow.bias = -0.000002;

    // gui.add(spotLight.position, 'x', -500, 500);
    // gui.add(spotLight.position, 'y', -500, 500);
    // gui.add(spotLight.position, 'z', -500, 500);
    // gui.add(spotLight, 'distance', 0, 1000);
  }

  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-10, 25, 20);
  }

  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `扫描式测风装置`,
        font: 'normal 32px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 140,
        y: 75,
      },
      {
        text: `风量(m³/min):`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 12,
        y: 133,
      },
      {
        text: `${selectData.m3 ? selectData.m3 : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 311,
        y: 133,
      },
      {
        text: `风速(m/s): `,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 12,
        y: 192,
      },
      {
        text: `${selectData.va ? selectData.va : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 310,
        y: 192,
      },
      {
        text: `断面积(㎡):`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 12,
        y: 247,
      },
      {
        text: `${selectData.fsectarea ? selectData.fsectarea : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 310,
        y: 247,
      },
      {
        text: `煤炭科学技术研究院有限公司研制`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 50,
        y: 302,
      },
    ];

    getTextCanvas(560, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.DoubleSide, // 这里是双面渲染的意思
      });
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group?.getObjectByName('monitorText');
      if (monitorPlane) {
        monitorPlane.material = textMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(5.6, 3.46); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
        planeMesh.name = 'monitorText';
        planeMesh.scale.set(0.26, 0.26, 0.26);
        planeMesh.position.set(-2.52, 0.038, -0.42);
        this.group?.add(planeMesh);
      }
    });
  }

  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }
    if (this.isLRAnimation && this.group) {
      // 左右摇摆动画
      if (Math.abs(this.group.rotation.y) >= 0.2) {
        this.direction = -this.direction;
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      } else {
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      }
    }
  }

  initAnimation() {
    const dsmove = this.group.getObjectByName('dsmove');
    const dsmoveLine = dsmove?.getObjectByName('probe');
    const line = dsmoveLine?.getObjectByName('line_');

    if (line) {
      line.material.side = THREE.DoubleSide;
      line.material.opacity = 1;
      line.material.depthWrite = true;

      this.lineLight = gsap.to(line.material, {
        opacity: 0,
        duration: 0.3,
        ease: 'easeQutQuad',
        repeat: -1,
        yoyo: true,
        paused: true,
      });
      this.lineLight.play();
    }

    const dsgdObj = this.group.getObjectByName('dsgd');
    const dsgdLine = dsgdObj?.getObjectByName('fout_ceasourment_01')?.getObjectByName('cea08');
    if (dsgdLine) {
      dsgdLine.material.side = THREE.DoubleSide;
      dsgdLine.material.opacity = 1;
      dsgdLine.material.depthWrite = true;

      const gdLine = gsap.to(dsgdLine.material, {
        opacity: 0,
        duration: 0.3,
        ease: 'easeQutQuad',
        repeat: -1,
        yoyo: true,
        paused: true,
      });
      gdLine.play();
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    this.isLRAnimation = false;
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
    // 判断是否点击到视频
    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() {
    // 10s后开始摆动
    if (!this.animationTimer && !this.isLRAnimation) {
      this.animationTimer = setTimeout(() => {
        this.isLRAnimation = true;
      }, 10000);
    }
  }

  resetModel() {
    clearTimeout(this.animationTimer);
    this.isLRAnimation = false;
  }

  // 播放动画
  play(flag, isDirect = false) {
    if (this.deviceType !== 'move') return;
    const dsmove = this.group?.getObjectByName('dsmove') as THREE.Object3D;
    const dsTanTou = dsmove?.getObjectByName('probe') as THREE.Object3D;

    if (!dsTanTou || (flag != 'start' && flag != 'moni' && flag != 'up' && flag != 'down')) return;
    dsTanTou.position.setY(0.45);
    if (flag == 'moni') {
      gsap.to(dsTanTou['position'], {
        y: -0.32,
        duration: Math.abs(dsTanTou['position']['y'] + 0.32) * 21,
        overwrite: true,
        onComplete: function () {
          setTimeout(() => {
            gsap.to(dsTanTou['position'], {
              y: 0.45,
              duration: 0.77 * 21,
              overwrite: true,
              // onComplete: function () {
              //   _this.isRun = false;
              // },
            });
          }, 5000);
        },
      });
      // setTimeout(() => {

      // }, Math.abs(dsTanTou['position']['y'] - 0.32) * 21);
    } else {
      if (!isDirect) {
        if (this.isRun) return;
        if (flag == 'down') {
          dsTanTou.position.setY(0.45);
          this.isRun = true;
          gsap.to(dsTanTou['position'], {
            y: -0.32,
            duration: Math.abs(dsTanTou['position']['y'] + 0.32) * 31,
            overwrite: true,
          });
        } else if (flag == 'up') {
          new Promise((resove) => {
            gsap.to(dsTanTou['position'], {
              y: 0.45,
              duration: 0.77 * 31,
              overwrite: true,
              onComplete: function () {
                resove(null);
              },
            });
          }).then(() => {
            this.isRun = false;
          });
        }
      } else {
        if (!this.isRun) return;
        const dsDown = gsap.getById('dsDown');
        const dsUp = gsap.getById('dsUp');
        if (dsDown) {
          dsDown.pause();
          dsDown.kill();
        }
        if (dsUp) {
          dsUp.pause();
          dsUp.kill();
        }
        dsTanTou.position.setY(0);
        this.isRun = false;
      }
    }
  }

  async initCamera(dom1?) {
    const videoPlayer1 = dom1;
    let monitorPlane: THREE.Mesh | null = null;
    const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
    const textMap = new THREE.CanvasTexture(canvas); // 关键一步
    const textMaterial = new THREE.MeshBasicMaterial({
      map: textMap, // 设置纹理贴图
      transparent: true,
      side: THREE.DoubleSide, // 这里是双面渲染的意思
    });
    textMaterial.blending = THREE.CustomBlending;
    monitorPlane = this.group?.getObjectByName('noPlayer');
    if (monitorPlane) {
      monitorPlane.material = textMaterial;
    } else {
      const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
      monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
      textMaterial.dispose();
      planeGeometry.dispose();
    }
    const videoPlayer = this.group.getObjectByName('player1');
    if (videoPlayer) {
      this.model.clearMesh(videoPlayer);
      this.group.remove(videoPlayer);
    }
    const noPlayer1 = this.group.getObjectByName('noPlayer1');
    if (noPlayer1) {
      this.model.clearMesh(noPlayer1);
      this.group.remove(noPlayer1);
    }
    if (!videoPlayer1 && videoPlayer1 === null) {
      monitorPlane.name = 'noPlayer1';
      monitorPlane.scale.set(0.0125, 0.007, 0.012);
      monitorPlane.position.set(2.69, 0.02, -0.39);
      this.group?.add(monitorPlane);
    } else if (videoPlayer1) {
      const mesh = renderVideo(this.group, videoPlayer1, 'player1');
      if (mesh) {
        mesh?.scale.set(0.042, 0.036, 1);
        mesh?.position.set(2.685, 0.016, -0.38);
        mesh.rotation.y = -Math.PI;
        this.group.add(mesh);
      }
    }
  }

  resetModal() {
    const fmThreeBase = this.group.getObjectByName('dscf');
    if (fmThreeBase) {
      const screenObj1 = fmThreeBase.getObjectByName('对象208');
      const screenObj2 = fmThreeBase.getObjectByName('Box542');
      if (screenObj1) screenObj1.visible = false;
      if (screenObj2) screenObj2.visible = false;
    }
  }

  mountedThree() {
    return new Promise((resolve) => {
      this.model
        .setGLTFModel([this.modelName, 'dsgd', 'dsmove'], this.group)
        .then((object) => {
          // this.group.name = this.modelName;
          this.resetModal();
          this.setModalPosition();
          this.initAnimation();
          this.addLight();
          if (this.deviceType) this.setModelType(this.deviceType);
          resolve(null);
        })
        .catch(() => {
          resolve(null);
        });
    });
  }

  destroy() {
    if (this.lineLight && this.lineLight.kill) this.lineLight.kill();
    if (this.group) {
      this.model.clearGroup(this.group);
    }

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

export default dsWindRect;