固定测风

src/views/vent/monitorManager/windrectMonitor/duisheFixed.threejs.ts

@@ -0,0 +1,272 @@
+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 fixedWindRect {
+  model;
+  modelName = 'fixedCf';
+  group: THREE.Object3D = new THREE.Object3D();
+  animationTimer;
+  isLRAnimation = true;
+  direction = 1;
+  lineLight;
+  constructor(model) {
+    this.model = model;
+    this.group.name = this.modelName;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(64, 215, 500);
+    directionalLight.target = this.group;
+    this.group.add(directionalLight);
+
+    const pointLight2 = new THREE.PointLight(0xffffff, 2, 300);
+    pointLight2.position.set(-113, 29, 10);
+    // light2.castShadow = true
+    pointLight2.shadow.bias = -0.05;
+    this.group.add(pointLight2);
+
+    // gui.add(pointLight2.position, 'x', -1000, 1000);
+    // gui.add(pointLight2.position, 'y', -1000, 1000);
+    // gui.add(pointLight2.position, 'z', -1000, 1000);
+
+    // 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: 160,
+        y: 75,
+      },
+      {
+        text: `风量(m3/min):`,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 10,
+        y: 140,
+      },
+      {
+        text: `${selectData.m3 ? selectData.m3 : '-'}`,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 311,
+        y: 140,
+      },
+      {
+        text: `风速(m/s): `,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 10,
+        y: 202,
+      },
+      {
+        text: `${selectData.va ? selectData.va : '-'}`,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 310,
+        y: 202,
+      },
+      {
+        text: `断面积(㎡):`,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 10,
+        y: 272,
+      },
+      {
+        text: `${selectData.fsectarea ? selectData.fsectarea : '-'}`,
+        font: 'normal 29px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 310,
+        y: 272,
+      },
+      {
+        text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
+        font: 'normal 28px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: History_Type['type'] == 'remote' ? 110 : 50,
+        y: 328,
+      },
+    ];
+
+    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.23, 0.23, 0.23);
+        planeMesh.position.set(-2.38, 0.068, -0.4);
+        this.group?.add(planeMesh);
+      }
+    });
+  }
+  initAnimation() {
+    let line = this.group?.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();
+    }
+  }
+
+  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.011, 0.0053, 0.012);
+      monitorPlane.position.set(-4.3, 0.13, -0.23);
+      this.group?.add(monitorPlane);
+    } else if (videoPlayer1) {
+      const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+      if (mesh) {
+        mesh?.scale.set(0.042, 0.036, 0.022);
+        mesh?.position.set(2.552, 0.018, -0.4);
+        this.group.add(mesh);
+      }
+    }
+  }
+  /* 风门动画 */
+  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;
+      }
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    this.isLRAnimation = false;
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      intersect;
+      return false;
+    });
+  }
+
+  mouseUpModel() {
+    // 10s后开始摆动
+    if (!this.animationTimer && !this.isLRAnimation) {
+      this.animationTimer = setTimeout(() => {
+        this.isLRAnimation = true;
+      }, 10000);
+    }
+  }
+
+  resetModel() {
+    clearTimeout(this.animationTimer);
+    this.isLRAnimation = false;
+  }
+
+  mountedThree(playerDom) {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then((gltf) => {
+        this.group = gltf[0];
+        this.setModalPosition();
+        this.addLight();
+        resolve(null);
+        this.initAnimation();
+        this.initCamera(playerDom);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.group) {
+      this.model.clearGroup(this.group);
+    }
+    this.model = null;
+    this.group = null;
+  }
+}
+
+export default fixedWindRect;