vent-template/src/views/vent/monitorManager/windowMonitor/dandaoFcXk.threejs.ts

import * as THREE from 'three';

import { getTextCanvas } from '/@/utils/threejs/util';
import gsap from 'gsap';

class singleWindowXk {
  model;
  modelName = 'xkFcGroup';
  group: THREE.Object3D = new THREE.Object3D();
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  windowsActionArr = {
    frontWindow: [],
  };

  constructor(model) {
    this.model = model;
    this.group.name = 'xkFcGroup';
  }
  addLight = () => {
    if (!this.group || !this.group) return;
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(800.0, 120.0, 80.0);
    this.group.add(directionalLight);

    const pointLight2 = new THREE.PointLight(0xffffff, 1, 150);
    pointLight2.position.set(-101, 34, 16);
    pointLight2.shadow.bias = 0.05;
    this.group.add(pointLight2);

    const pointLight3 = new THREE.PointLight(0xffffff, 1, 150);
    pointLight3.position.set(19, 25, -7);
    pointLight3.shadow.bias = 0.05;
    this.group.add(pointLight3);

    const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
    pointLight6.position.set(51, 51, 9);
    pointLight6.shadow.bias = 0.05;
    this.group.add(pointLight6);
  };
  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-35, 25, 15);
  }

  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `远程定量调节自动风窗`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 100,
        y: 95,
      },
      {
        text: `${selectData.OpenDegree ? '开度值(°)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 145,
      },
      {
        text: selectData.OpenDegree
          ? Number(`${selectData.OpenDegree}`).toFixed(2)
          : selectData.forntArea
          ? Number(`${selectData.forntArea}`).toFixed(2)
          : '-',
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 145,
      },
      {
        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态：'}:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 200,
      },
      {
        text: `${
          selectData.frontRearDP
            ? selectData.frontRearDP
            : selectData.windSpeed
            ? selectData.windSpeed
            : selectData.netStatus == '0'
            ? '断开'
            : '连接'
        }`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 200,
      },
      {
        text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 250,
      },
      {
        text: `${selectData.fWindowM3 ? selectData.fWindowM3 : selectData.nwindownum}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 250,
      },
      {
        text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: History_Type['type'] == 'remote' ? 90 : 30,
        y: 300,
      },
    ];
    getTextCanvas(750, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.DoubleSide, // 这里是双面渲染的意思
      });
      textMap.dispose();
      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.0095, 0.01, 0.01);
        planeMesh.position.set(6.97, -0.395, -0.63);
        this.group?.add(planeMesh);
      }
    });
  }

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    const meshArr01: THREE.Object3D[] = [];
    const fmGroup = this.group?.getObjectByName('Fc-Xk');
    if (fmGroup) {
      fmGroup.children.forEach((obj) => {
        if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('Blades')) {
          obj.rotateOnAxis(new THREE.Vector3(0, 0, -1), 0);
          meshArr01.push(obj);
        }
      });
    }
    this.windowsActionArr.frontWindow = meshArr01;
  }

  play(rotationParam, flag) {
    if (!this.windowsActionArr.frontWindow) {
      return;
    }
    if (flag === 1) {
      // 前风窗动画
      this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
        gsap.to(mesh.rotation, {
          x: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
          duration: Math.abs(rotationParam.frontDeg1 - mesh.rotation.x) / 10,
          overwrite: true,
        });
      });
    } else if (flag === 0) {
      ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
        gsap.to(mesh.rotation, {
          x: 0,
          overwrite: true,
        });
      });
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
    console.log('摄像头控制信息', this.model.orbitControls, this.model.camera);
  }

  mouseUpModel() {}

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

  resetMaterial() {
    const fcModal = this.group.getObjectByName('Fc-Xk');
    if (fcModal) {
      const stainlseeSteel_grey = (fcModal.getObjectByName('Box771') as THREE.Mesh)?.material; // 圈;
      const stainlessSteel_light = (fcModal.getObjectByName('Line12241') as THREE.Mesh)?.material; // 框;
      const fluorescent_green = (fcModal.getObjectByName('对象276') as THREE.Mesh)?.material; // fluorescent_green;
      const fluorescent_green1 = (fcModal.getObjectByName('Box770') as THREE.Mesh)?.material; // 23 - Default;
      const wire = (fcModal.getObjectByName('对象281') as THREE.Mesh)?.material; // wire_028149177;
      const net = (fcModal.getObjectByName('Plane9230') as THREE.Mesh)?.material; // wire_028149177;
      const stainlesssteel_blue = (fcModal.getObjectByName('Blades08') as THREE.Mesh)?.material; // wire_028149177;

      (stainlseeSteel_grey as THREE.MeshStandardMaterial).color.set(0xb3b3b3);
      (stainlseeSteel_grey as THREE.MeshStandardMaterial).roughness = 0.26;

      (stainlessSteel_light as THREE.MeshStandardMaterial).color.set(0x9e9e9e);
      (stainlessSteel_light as THREE.MeshStandardMaterial).roughness = 0.26;
      (stainlessSteel_light as THREE.MeshStandardMaterial).envMapIntensity = 0.92;

      (fluorescent_green as THREE.MeshStandardMaterial).color.set(0x00fff2);
      (fluorescent_green as THREE.MeshStandardMaterial).envMapIntensity = 1.5;
      //
      (fluorescent_green1 as THREE.MeshStandardMaterial).color.set(0x00fff2);
      (fluorescent_green1 as THREE.MeshStandardMaterial).envMapIntensity = 1.5;

      (wire as THREE.MeshStandardMaterial).color.set(0x38e4ff);
      (wire as THREE.MeshStandardMaterial).envMapIntensity = 2;

      (net as THREE.MeshStandardMaterial).color.set(0xcfcfcf);
      (stainlesssteel_blue as THREE.MeshStandardMaterial).color.set(0xababab);
      (stainlesssteel_blue as THREE.MeshStandardMaterial).roughness = 0.45;
    }
  }

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setGLTFModel(['Fc-Xk'], this.group).then(async () => {
        resolve(null);
        this.resetMaterial();
        this.setModalPosition();
        this.initAnimation();
        this.addLight();
      });
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.model = null;
    this.group = null;
  }
}
export default singleWindowXk;