mky-vent-5/src/views/vent/monitorManager/gateMonitor/gate.threejs.three.ts

import * as THREE from 'three';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import UseThree from '../../../../utils/threejs/useThree';
import { drawHot } from '/@/utils/threejs/util';
import { useAppStore } from '/@/store/modules/app';

// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999';

class Fm1 {
  modelName = 'fm';
  model; //
  group;
  isLRAnimation = true; // 是否开启左右摇摆动画
  direction = 1; // 摇摆方向
  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
  player1;
  player2;
  deviceDetailCSS3D;
  playerStartClickTime1 = new Date().getTime();
  playerStartClickTime2 = new Date().getTime();

  frontClock = new THREE.Clock();
  backClock = new THREE.Clock();

  appStore = useAppStore();

  clipActionArr = {
    frontDoor: null as unknown as THREE.AnimationAction,
    backDoor: null as unknown as THREE.AnimationAction,
  };

  constructor(model, playerVal1, playerVal2) {
    this.model = model;
    this.player1 = playerVal1;
    this.player2 = playerVal2;
  }

  addLight(scene) {
    const pointLight2 = new THREE.PointLight(0xffeeee, 0.8, 300);
    pointLight2.position.set(-113, 29, 10);
    // light2.castShadow = true
    pointLight2.shadow.bias = -0.05;
    scene.add(pointLight2);
    // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, 1 );
    // scene.add( pointLightHelper2 );

    const pointLight3 = new THREE.PointLight(0xffffff, 0.8, 100);
    pointLight3.position.set(0, 30, 3);
    // light2.castShadow = true
    pointLight3.shadow.bias = -0.05;
    scene.add(pointLight3);
    // const pointLightHelper = new THREE.PointLightHelper( pointLight3, 1 );
    // scene.add( pointLightHelper );

    const pointLight4 = new THREE.PointLight(0xffeeee, 0.6, 100);
    pointLight4.position.set(-14, 29, 13);
    // light2.castShadow = true
    pointLight4.shadow.bias = -0.05;
    scene.add(pointLight4);
    // const pointLightHelper4 = new THREE.PointLightHelper( pointLight4, 1 );
    // scene.add( pointLightHelper4 );

    const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 100);
    pointLight5.position.set(80, 43, -5.3);
    // light2.castShadow = true
    pointLight5.shadow.bias = -0.05;
    scene.add(pointLight5);
    // const pointLightHelper5 = new THREE.PointLightHelper( pointLight5, 1 );
    // scene.add( pointLightHelper5 );

    const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
    // pointLight6.position.set(-47, 49, 12.9)
    pointLight6.position.set(-7, 40, 9);
    // light2.castShadow = true
    pointLight6.shadow.bias = -0.05;
    scene.add(pointLight6);
    // const pointLightHelper6 = new THREE.PointLightHelper( pointLight6, 1 );
    // scene.add( pointLightHelper6 );

    const pointLight7 = new THREE.PointLight(0xffffff, 0.8, 300);
    pointLight7.position.set(45, 51, -4.1);
    // light2.castShadow = true
    pointLight7.shadow.bias = -0.05;
    scene.add(pointLight7);
    // const pointLightHelper7 = new THREE.PointLightHelper( pointLight7, 1 );
    // scene.add( pointLightHelper7 );

    // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    // directionalLight.target = group;
    // directionalLight.position.set(-18, 20, 39);
    // directionalLight.rotation.set(1.3, 0.3, 5.8);
    // scene.add(directionalLight);
    // const helper = new THREE.DirectionalLightHelper(directionalLight, 5);
    // scene.add(helper);

    const spotLight = new THREE.SpotLight();
    spotLight.angle = Math.PI / 16;
    spotLight.penumbra = 0;
    // spotLight.castShadow = true;
    spotLight.position.set(-231, 463, 687);
    scene.add(spotLight);

    // spotLight.shadow.mapSize.width = 1500;  // default
    // spotLight.shadow.mapSize.height = 800; // default
    spotLight.shadow.camera.near = 0.5; // default
    spotLight.shadow.camera.far = 1000; // default
    spotLight.shadow.focus = 1.2;
    spotLight.shadow.bias = -0.000002;

    // const spotLightHelper = new THREE.SpotLightHelper(spotLight);
    // scene.add(spotLightHelper);

    // model.canvasContainer?.appendChild(gui.domElement);
    // gui.add(directionalLight.position, 'x', -100, 100).step(1);
    // gui.add(directionalLight.position, 'y', -100, 100).step(1);
    // gui.add(directionalLight.position, 'z', -100, 100).step(1);
    // gui.add(directionalLight.rotation, 'x', -Math.PI, 2 * Math.PI).step(0.1);
    // gui.add(directionalLight.rotation, 'y', -Math.PI, 2 * Math.PI).step(0.1);
    // gui.add(directionalLight.rotation, 'z', -Math.PI, 2 * Math.PI).step(0.1);
    // gui.add(spotLight, 'angle', 0, Math.PI / 2);
    // gui.add(spotLight, 'distance', 0, 1000);
    // gui.add(pointLight6.position, 'x', -200, 200)
    // gui.add(pointLight6.position, 'y', -200, 200)
    // gui.add(pointLight6.position, 'z', -200, 200)
  }
  // 重置摄像头
  resetCamera() {
    this.model.camera.far = 274;
    this.model.orbitControls?.update();
    this.model.camera.updateProjectionMatrix();
  }
  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-20, 20, 9);
  }

  /* 添加监控数据 */
  addFmText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `远程控制自动风门`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 120,
        y: 100,
      },
      {
        text: `压力(Pa):`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 155,
      },
      {
        text: `${selectData.frontRearDP}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 290,
        y: 155,
      },
      {
        text: `动力源压力(MPa): `,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 215,
      },
      {
        text: ` ${selectData.sourcePressure}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 280,
        y: 215,
      },
      {
        text: `故障诊断:`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 275,
      },
      {
        text: `${selectData.fault}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 280,
        y: 275,
      },
      {
        text: `煤炭科学技术研究院有限公司研制`,
        font: 'normal 28px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 20,
        y: 325,
      },
    ];

    //
    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      textMap.encoding = THREE.sRGBEncoding;
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.FrontSide, // 这里是双面渲染的意思
      });
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group.getObjectByName('monitorText');
      if (monitorPlane) {
        monitorPlane.material = textMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
        planeMesh.name = 'monitorText';
        planeMesh.scale.set(0.002, 0.002, 0.002);
        planeMesh.position.set(-1.255, 0.09, -0.41);
        this.group.add(planeMesh);
      }
    });
  }

  /** 添加热点 */
  drawHots() {
    const hotPositions = [
      { x: -0.37, y: 0.26, z: -0.32 },
      { x: 0.28, y: -0.2, z: -0.43 },
      { x: 0.55, y: -0.22, z: -0.38 },
    ];
    for (let i = 0; i < 3; i++) {
      const hotPoint = drawHot(0.1);
      const position = hotPositions[i];
      // hotPoint.scale.set(0.3, 0.3, 0.3);
      hotPoint.position.set(position.x, position.y, position.z);
      hotPoint.name = 'hotPoint' + i;
      this.group?.add(hotPoint);
    }
  }

  /* 风门动画 */
  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;
      }
    }

    // // //自发光
    // const screen = group.getObjectByName('对象156');
    // if (screen) {
    //   model.renderer.clearDepth();
    //   screen.layers.enable(31);
    //   !!renderBloomPass && renderBloomPass(group);
    // }

    // 风门开关动画
    const frontDelta = this.frontClock?.getElapsedTime() + 0.5;
    const backDelta = this.backClock?.getElapsedTime() + 0.5;
    if (this.model.mixers[0]) this.model.mixers[0]?.update(frontDelta); //前门
    if (this.model.mixers[1]) this.model.mixers[1]?.update(backDelta); // 后门
  }

  /* 点击风窗，风窗全屏 */
  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) {
          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
          // 双击，视频放大
          if (this.player1) {
            this.player1.requestFullscreen();
          }
        }
        this.playerStartClickTime1 = new Date().getTime();
        return true;
      } else if (mesh.name === 'player2') {
        if (new Date().getTime() - this.playerStartClickTime2 < 400) {
          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
          // 双击，视频放大
          if (this.player2) {
            this.player2.requestFullscreen();
          }
        }
        this.playerStartClickTime2 = new Date().getTime();
        return true;
      } else if (mesh.name.startsWith('hotPoint')) {
        if (this.deviceDetailCSS3D) {
          this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.66, mesh.position.z + 0.02);
          console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
          this.deviceDetailCSS3D.visible = true;
          return true;
        }
        
      } else {
        this.deviceDetailCSS3D.visible = false;
        console.log('[ 点击事件 ] >');
      }
      return false;
    });
  }

  mouseUpModel() {
    // 10s后开始摆动
    if (!this.animationTimer && !this.isLRAnimation) {
      this.animationTimer = setTimeout(() => {
        this.isLRAnimation = true;
      }, 10000);
    }
  }

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    const fmGroup = this.group?.getObjectByName('Fm-door');
    if (fmGroup) {
      const tracks = fmGroup.animations[0].tracks;
      const fontTracks: any[] = [],
        backTracks: any[] = [];
      for (let i = 0; i < tracks.length; i++) {
        const track = tracks[i];
        if (track.name.startsWith('qianmen')) {
          fontTracks.push(track);
        } else if (track.name.startsWith('houmen')) {
          backTracks.push(track);
        }
      }
      const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
      const frontMixer = new THREE.AnimationMixer(fmGroup);
      this.model.mixers.push(frontMixer);
      const frontClipAction = frontMixer.clipAction(frontDoor, fmGroup);
      frontClipAction.clampWhenFinished = true;
      frontClipAction.loop = THREE.LoopOnce;
      this.clipActionArr.frontDoor = frontClipAction;

      const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
      const backMixer = new THREE.AnimationMixer(fmGroup);
      this.model.mixers.push(backMixer);
      const backClipAction = backMixer.clipAction(backDoor, fmGroup);
      backClipAction.clampWhenFinished = true;
      backClipAction.loop = THREE.LoopOnce;
      this.clipActionArr.backDoor = backClipAction;
    }
  }

  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
    const element = document.getElementById('deviceCard') as HTMLElement;
    this.deviceDetailCSS3D = new CSS2DObject(element);
    this.deviceDetailCSS3D.name = 'deviceCard';
    this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
    this.deviceDetailCSS3D.visible = false;
    // this.model.scene.add(this.deviceDetailCSS3D);
    this.group.add(this.deviceDetailCSS3D);
  }

  // 播放动画
  play(handlerState, timeScale = 0.01) {
    let handler = () => {};
    switch (handlerState) {
      case 1: // 打开前门
        handler = () => {
          debugger;
          this.clipActionArr.frontDoor.paused = true;
          this.clipActionArr.frontDoor.reset();
          this.clipActionArr.frontDoor.time = 1.2;
          this.clipActionArr.frontDoor.timeScale = timeScale;
          this.clipActionArr.frontDoor.clampWhenFinished = true;
          this.clipActionArr.frontDoor.play();
          this.frontClock.start();
        };
        break;
      case 2: // 关闭前门
        handler = () => {
          debugger;
          this.clipActionArr.frontDoor.paused = true;
          this.clipActionArr.frontDoor.reset(); //
          this.clipActionArr.frontDoor.time = 4;
          this.clipActionArr.frontDoor.timeScale = -timeScale;
          this.clipActionArr.frontDoor.clampWhenFinished = true;
          this.clipActionArr.frontDoor.play();
          this.frontClock.start();
        };
        break;
      case 3: // 打开后门
        handler = () => {
          debugger;
          this.clipActionArr.backDoor.paused = true;
          this.clipActionArr.backDoor.reset();
          this.clipActionArr.backDoor.time = 1.2;
          this.clipActionArr.backDoor.timeScale = timeScale;
          this.clipActionArr.backDoor.clampWhenFinished = true;
          this.clipActionArr.backDoor.play();
          this.backClock.start();
        };
        break;
      case 4: // 关闭后门
        handler = () => {
          debugger;
          this.clipActionArr.backDoor.paused = true;
          this.clipActionArr.backDoor.reset();
          this.clipActionArr.backDoor.time = 4;
          this.clipActionArr.backDoor.timeScale = -timeScale;
          this.clipActionArr.backDoor.clampWhenFinished = true;
          this.clipActionArr.backDoor.play();
          this.backClock.start();
        };
        break;
      case 5: // 打开前后门
        handler = () => {
          debugger;
          this.clipActionArr.backDoor.paused = true;
          this.clipActionArr.frontDoor.paused = true;

          this.clipActionArr.frontDoor.reset();
          this.clipActionArr.frontDoor.time = 0;
          this.clipActionArr.frontDoor.timeScale = 0.01;
          this.clipActionArr.frontDoor.clampWhenFinished = true;
          this.clipActionArr.frontDoor.play();

          this.clipActionArr.backDoor.reset();
          this.clipActionArr.backDoor.time = 0;
          this.clipActionArr.backDoor.timeScale = 0.01;
          this.clipActionArr.backDoor.clampWhenFinished = true;
          this.clipActionArr.backDoor.play();
          this.frontClock.start();
          this.backClock.start();
        };
        break;
      case 6: // 关闭前后门
        handler = () => {
          debugger;
          this.clipActionArr.backDoor.paused = true;
          this.clipActionArr.frontDoor.paused = true;

          this.clipActionArr.frontDoor.reset();
          this.clipActionArr.frontDoor.time = 4;
          this.clipActionArr.frontDoor.timeScale = -0.01;
          this.clipActionArr.frontDoor.clampWhenFinished = true;
          this.clipActionArr.frontDoor.play();
          this.clipActionArr.backDoor.reset();
          this.clipActionArr.backDoor.time = 4;
          this.clipActionArr.backDoor.timeScale = -0.01;
          this.clipActionArr.backDoor.clampWhenFinished = true;
          this.clipActionArr.backDoor.play();
          this.frontClock.start();
          this.backClock.start();
        };
        break;
      default:
    }

    handler();
    // model.clock.start();
    // const honglvdeng = group.getObjectByName('honglvdeng');
    // const material = honglvdeng.material;
    // setTimeout(() => {
    //   if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
    //     material.color = new THREE.Color(0x00ff00);
    //   } else {
    //     material.color = new THREE.Color(0xff0000);
    //   }
    // }, 1000);
  }

  mountedThree() {
    this.group = new THREE.Object3D();
    this.group.name = this.modelName;
    return new Promise((resolve) => {
      this.model = new UseThree('#damper3D', '', '#deviceDetail');

      this.model.setEnvMap('test1');
      this.model.renderer.toneMappingExposure = 1;
      this.model.scene?.add(this.group);
      this.group?.layers.enableAll();

      this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => {
        this.setModalPosition();
        // 初始化左右摇摆动画;
        this.initAnimation();
        this.drawHots();

        this.deviceDetailCard();
        this.model.animate();
        if (this.model.camera.layers.mask == -1) this.model.camera.layers.toggle(1);
        setTimeout(async () => {
          const videoPlayer1 = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
          const videoPlayer2 = document.getElementById('fm-player2')?.getElementsByClassName('vjs-tech')[0];
          if (!videoPlayer1 || !videoPlayer2) {
            const textArr = [
              {
                text: `无信号输入`,
                font: 'normal 40px Arial',
                color: '#009900',
                strokeStyle: '#002200',
                x: 170,
                y: 40,
              },
            ];
            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('noPlayer');
              if (monitorPlane) {
                monitorPlane.material = textMaterial;
              } else {
                const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
                const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
                if (!videoPlayer1) {
                  planeMesh.name = 'noPlayer1';
                  planeMesh.scale.set(0.011, 0.008, 0.011);
                  planeMesh.position.set(-4.23, -0.28, -0.39);
                  this.group?.add(planeMesh.clone());
                }
                if (!videoPlayer2) {
                  planeMesh.name = 'noPlayer2';
                  planeMesh.scale.set(0.012, 0.009, 0.012);
                  planeMesh.position.set(4.33, -0.33, -0.39);
                  this.group?.add(planeMesh.clone());
                }
                textMaterial.dispose();
                planeGeometry.dispose();
              }
            });
          } else {
            if (videoPlayer2) {
              const mesh = renderVideo(this.group, videoPlayer1, 'player1');
              mesh?.scale.set(-0.028, 0.0285, 1);
              mesh?.position.set(4.298, 0.02, -0.4);
              mesh.rotation.y = -Math.PI;
              this.group.add(mesh);
            }
            if (videoPlayer1) {
              const mesh = renderVideo(this.group, videoPlayer2, 'player2');
              mesh?.scale.set(-0.028, 0.0285, 1);
              mesh?.position.set(-4.262, 0.02, -0.4);
              mesh.rotation.y = -Math.PI;
              this.group.add(mesh);
            }
          }

          resolve(this.model);
        }, 0);
      });
    });
  }

  destroy() {
    if (this.model) {
      if (this.model.mixers[0]) {
        this.model.mixers[0].uncacheClip(this.clipActionArr.frontDoor.getClip());
        this.model.mixers[0].uncacheClip(this.clipActionArr.backDoor.getClip());
        this.model.mixers[0].uncacheAction(this.clipActionArr.frontDoor, this.group);
        this.model.mixers[0].uncacheAction(this.clipActionArr.backDoor, this.group);
        this.model.mixers[0].uncacheRoot(this.group);

        this.model.mixers[1].uncacheClip(this.clipActionArr.frontDoor.getClip());
        this.model.mixers[1].uncacheClip(this.clipActionArr.backDoor.getClip());
        this.model.mixers[1].uncacheAction(this.clipActionArr.frontDoor, this.group);
        this.model.mixers[1].uncacheAction(this.clipActionArr.backDoor, this.group);
        this.model.mixers[1].uncacheRoot(this.group);

        if (this.model.animations[0]) this.model.animations[0].tracks = [];
      }

      this.clipActionArr.backDoor = undefined;
      this.clipActionArr.frontDoor = undefined;

      this.model.mixers = [];
      this.model.deleteModal();
      this.model = null;
      this.group = null;
      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
    }
  }
}
export default Fm1;