[Wip 0000] 局部通风机添加双巷模型

src/utils/threejs/main.worker.ts

@@ -46,6 +46,7 @@ export function initModalWorker() {
     'jbfj/jbfj-hd_2025-01-09.glb',
     'jbfj/jbfj-fm_2023-06-02.glb',
     'jbfj/jbfj-fc_2023-06-02.glb',
+    'jbfj/jbfj-dual_2025-01-20.glb',
     'ztfj/dj1_2023-06-02.glb',
     'ztfj/dj2_2023-06-02.glb',
     'ztfj/bg_2023-06-02.glb',

src/views/vent/monitorManager/dedustMonitor/dedust.threejs.ts

@@ -60,7 +60,7 @@ export function setModelType(modelType: 'dedust') {
       if (modelType === type) {
         group = context?.group as THREE.Object3D;
         setTimeout(async () => {
-          if (!model.scene?.getObjectByName(type) && group) {
+          if (!model.scene?.getObjectByName(group.name) && group) {
             model.scene?.add(group);
           }
           const oldCameraPosition = { x: -693, y: 474, z: 398 };

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts → src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.bk.ts

@@ -278,7 +278,7 @@ export const addCssText = () => {
       fanLocalCSS3D.name = 'text2';
       fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
       fanLocalCSS3D.rotation.y = -Math.PI / 2;
-      fanLocalCSS3D.position.set(57.84, 10.54, 0.08);
+      fanLocalCSS3D.position.set(74.63, 13.54, 3.84);
       group.add(fanLocalCSS3D);
     }
   }
@@ -335,7 +335,7 @@ export const addCssText = () => {
       fanLocalCSS3D.name = 'text6';
       fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
       fanLocalCSS3D.rotation.y = -Math.PI / 2;
-      fanLocalCSS3D.position.set(-84.23, 6.01, -0.03);
+      fanLocalCSS3D.position.set(-84.23, 6.89, -4.2);
       group.add(fanLocalCSS3D);
     }
   }

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.threejs.base.ts

@@ -0,0 +1,626 @@
+import * as THREE from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { animateCamera, getTextCanvas, setModalCenter } from '/@/utils/threejs/util';
+import Smoke from '/@/views/vent/comment/threejs/Smoke';
+import fcFan from './fcfanLocal.three';
+import fmFan from './fmfanLocal.three';
+import gsap from 'gsap';
+// import { setModalCenter } from '/@/utils/threejs/util';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+// 本模型的上下文对象，用于实现本模型的特定功能，代码参考了旧有的 fanLocal.three.ts
+class ModelContext {
+  model;
+  modelName = 'jbfj-hd';
+  group: THREE.Object3D | null = null;
+  fanType?: string;
+  fcFanObj?: fcFan;
+  fmFanObj?: fmFan;
+  topSmoke?: Smoke;
+  downSmoke?: Smoke;
+  returnSmoke?: Smoke;
+  topLife?: number;
+  downLife?: number;
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    // optional implementation
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          const Fengtongbu01 = this.group.getObjectByName('Cylinder1054') as THREE.Mesh;
+          const textMaterial = new THREE.MeshBasicMaterial({
+            color: '#000',
+            transparent: true,
+            opacity: 0.3,
+            side: THREE.DoubleSide, // 这里是双面渲染的意思
+          });
+          Fengtongbu01.material = textMaterial;
+          Fengtongbu01.renderOrder = 300;
+
+          setModalCenter(this.group);
+          this.addLight();
+          this.initFly();
+          this.setModalPosition();
+
+          this.fcFanObj = new fcFan(this.model);
+          await this.fcFanObj.mountedThree();
+
+          this.fmFanObj = new fmFan(this.model);
+          await this.fmFanObj.mountedThree();
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      this.model.isRender = false;
+      this.clearFly();
+      this.topSmoke = undefined;
+      this.downSmoke = undefined;
+      this.returnSmoke = undefined;
+      if (this.fcFanObj) this.fcFanObj.destroy();
+      if (this.fmFanObj) this.fmFanObj.destroy();
+      // @ts-ignore
+      this.group = undefined;
+      this.model.destroy();
+    }
+  }
+
+  async initFly() {
+    const topCurve = [
+      {
+        path0: new THREE.Vector3(-89.84, 2.359, 4.91),
+        path1: new THREE.Vector3(-85.678, 2.359, 3.61),
+        isSpread: true,
+        spreadDirection: -1, //
+      },
+      {
+        path0: new THREE.Vector3(-85.678, 2.352, 3.66),
+        path1: new THREE.Vector3(-85.636, 2.353, -3.829),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 2.353, -3.829),
+        path1: new THREE.Vector3(-85.636, 1.026, -5.881),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 1.026, -5.881),
+        path1: new THREE.Vector3(-85.618, 0.887, -12.862),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.618, 0.827, -12.962),
+        path1: new THREE.Vector3(80.404, 0.827, -12.962),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(80.404, 0.827, -12.962),
+        path1: new THREE.Vector3(93.164, 0.85, -12.962),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    const downCurve = [
+      {
+        path0: new THREE.Vector3(-94.84, -0.388, 3.61),
+        path1: new THREE.Vector3(-85.678, -0.393, 3.61),
+        isSpread: true,
+        spreadDirection: -1, //
+      },
+      {
+        path0: new THREE.Vector3(-85.678, -0.393, 3.275),
+        path1: new THREE.Vector3(-85.636, -0.392, -3.829),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, -0.392, -3.829),
+        path1: new THREE.Vector3(-85.636, 0.926, -5.881),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 1.026, -5.881),
+        path1: new THREE.Vector3(-85.618, 0.887, -12.862),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.618, 0.887, -12.962),
+        path1: new THREE.Vector3(80.404, 0.887, -12.962),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(80.404, 0.887, -12.962),
+        path1: new THREE.Vector3(93.164, 0.91, -12.962),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    const returnCurve = [
+      {
+        path0: new THREE.Vector3(93.164, 0.85, -12.962),
+        path1: new THREE.Vector3(86.39, 0.827, -12.962),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(86.39, 0.827, -12.962),
+        path1: new THREE.Vector3(83.341, 0.847, -17.658),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(83.341, 0.847, -17.658),
+        path1: new THREE.Vector3(-29.077, 0.847, -17.658),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(-29.077, 0.847, -17.658),
+        path1: new THREE.Vector3(-29.64, 0.827, -39.047),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+    ];
+
+    if (!this.topSmoke) {
+      this.topSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+      this.topSmoke.setPath(topCurve);
+      await this.topSmoke.setPoints();
+      this.group?.add(this.topSmoke.points);
+    }
+    if (!this.downSmoke) {
+      this.downSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+      this.downSmoke.setPath(downCurve);
+      await this.downSmoke.setPoints();
+      this.group?.add(this.downSmoke.points);
+    }
+
+    if (!this.returnSmoke) {
+      this.returnSmoke = new Smoke('/model/img/texture-smoke.png', '#777777', 0, 0.35, 1.5, 200);
+      this.returnSmoke.setPath(returnCurve);
+      await this.returnSmoke.setPoints();
+      this.group?.add(this.returnSmoke.points);
+    }
+  }
+
+  playSmoke(selectData) {
+    // debugger;
+    // console.log('selectData[Fan1fHz]------------》', selectData['Fan1fHz'], Number(selectData['Fan1fHz']));
+    if (selectData['Fan1StartStatus'] == '1') {
+      // 主风机打开
+      // setSmokeFrequency('top', Number(selectData['Fan1fHz']) || 40);
+      this.setSmokeFrequency('top', 40);
+      this.runFly('top', 'open');
+    } else {
+      // 备风机关闭
+      this.runFly('top', 'close');
+    }
+    if (selectData['Fan2StartStatus'] == '1') {
+      // 备风机打开
+      // setSmokeFrequency('down', Number(selectData['Fan2fHz']) || 40);
+      this.setSmokeFrequency('down', 40);
+      this.runFly('down', 'open');
+    } else {
+      // 备风机关闭
+      this.runFly('down', 'close');
+    }
+
+    if (selectData['Fan1StartStatus'] != '1' && selectData['Fan2StartStatus'] != '1') {
+      this.runFly('all', 'close');
+    }
+
+    // if (frequency) {
+    //   setSmokeFrequency(deviceType, frequency);
+    // }
+    // if (controlType === 'startSmoke') {
+    //   runFly(deviceType, state);
+    // }
+  }
+
+  runFly(deviceType, state) {
+    if (state === 'open') {
+      if (deviceType === 'top') {
+        if (this.downSmoke && this.downSmoke.frameId) {
+          this.downSmoke.stopSmoke();
+        }
+        if (this.topSmoke && !this.topSmoke.frameId) {
+          this.topSmoke.startSmoke();
+        }
+      } else {
+        if (this.topSmoke && this.topSmoke.frameId) {
+          this.topSmoke.stopSmoke();
+        }
+        if (this.downSmoke && !this.downSmoke.frameId) {
+          this.downSmoke.startSmoke();
+        }
+      }
+      if (this.returnSmoke && !this.returnSmoke.frameId) {
+        this.returnSmoke?.startSmoke();
+      }
+    } else {
+      if (deviceType === 'top') {
+        if (this.topSmoke && this.topSmoke.frameId) {
+          this.topSmoke.stopSmoke();
+        }
+      } else {
+        if (this.downSmoke && this.downSmoke.frameId) {
+          this.downSmoke.stopSmoke();
+        }
+      }
+    }
+    if (deviceType === 'all' && state === 'close') {
+      this.returnSmoke?.stopSmoke();
+    }
+  }
+
+  setSmokeFrequency(deviceType, frequency) {
+    const life = (frequency - 30) * 25;
+    let duration = 0;
+    let smoke;
+
+    if (deviceType === 'top') {
+      if (this.topLife == life) {
+        return;
+      }
+      this.topLife = life;
+      smoke = this.topSmoke;
+      duration = (Math.abs(life - smoke.life) / 500) * 25;
+    } else {
+      if (this.downLife == life) {
+        return;
+      }
+      this.downLife = life;
+      smoke = this.downSmoke;
+      duration = (Math.abs(life - smoke.life) / 500) * 25;
+    }
+    if (smoke) {
+      gsap.to(smoke, {
+        life: life,
+        duration: duration,
+        ease: 'easeInCubic',
+        overwrite: true,
+      });
+    }
+  }
+
+  addText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    // @ts-ignore
+    const screenDownText = VENT_PARAM['modalText']
+      ? // @ts-ignore
+        VENT_PARAM['modalText']
+      : // @ts-ignore
+      History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
+    const textArr = [
+      {
+        text: `智能局部通风机监测与控制系统`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 20,
+        y: 108,
+      },
+      {
+        text: `供风距离(m):`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 152,
+      },
+      {
+        text: `${
+          selectData.fchimenylength ? selectData.fchimenylength : selectData.airSupplyDistence_merge ? selectData.airSupplyDistence_merge : '-'
+        }`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 228,
+        y: 152,
+      },
+      {
+        text: `风筒直径(mm): `,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 200,
+      },
+      {
+        text: ` ${selectData.fchimenydiamlimit ? selectData.fchimenydiamlimit : selectData.ductDiameter_merge ? selectData.ductDiameter_merge : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 200,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 245,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 245,
+      },
+      {
+        text: `型号功率:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 285,
+      },
+      {
+        text: `${selectData.model_Power_merge ? selectData.model_Power_merge : '-'}`,
+        font: 'normal 26px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 285,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group?.getObjectByName('monitorText');
+      if (monitorPlane) {
+        // @ts-ignore-next-line
+        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.0135, 0.0135, 0.0135);
+        planeMesh.rotation.y = -Math.PI / 2;
+        planeMesh.position.set(-84.79, 0.82, 17.0);
+        this.group?.add(planeMesh);
+      }
+    });
+  }
+
+  addCssText() {
+    if (!this.group) return;
+
+    if (!this.group.getObjectByName('text1')) {
+      const element = document.getElementById('inputBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text1';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+
+    if (!this.group.getObjectByName('text2')) {
+      const element = document.getElementById('outBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text2';
+        fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(57.84, 10.54, 0.08);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text3')) {
+      const element = document.getElementById('returnBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text3';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-25.97, 9.3, -15.09);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text4')) {
+      const element = document.getElementById('gateBox') as HTMLElement;
+      if (element) {
+        // element.innerHTML = '';
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text4';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-73.13, 8.44, -23.52);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text5')) {
+      const element = document.getElementById('windownBox') as HTMLElement;
+      if (element) {
+        // element.innerHTML = '';
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text5';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-28.44, 9.78, -40.42);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text7')) {
+      const element = document.getElementById('inputBox0') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text7';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-84.23, 4.97, -18.92);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text6')) {
+      const element = document.getElementById('inputBox1') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text6';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-84.23, 6.01, -0.03);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text8')) {
+      const element = document.getElementById('gasBox3') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text8';
+        fanLocalCSS3D.scale.set(0.03, 0.03, 0.03);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-90.04, 6, 5);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text9')) {
+      const element = document.getElementById('gasBox2') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text9';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-8, 7.46, -35.28);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text10')) {
+      const element = document.getElementById('gasBox1') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text10';
+        fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(80, 9, -43);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+  }
+
+  /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+  setModelType(type: 'fm' | 'fc' | string) {
+    this.fanType = type;
+    return new Promise((resolve) => {
+      if (!this.group) return;
+      // 显示双道风窗
+      let childGroup;
+      if (this.fanType === 'fm' && this.fcFanObj && this.fcFanObj.group) {
+        if (this.group?.getObjectByName('jbfj-fc')) {
+          this.group?.remove(this.fcFanObj.group);
+        }
+        childGroup = this.fmFanObj?.group;
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = false;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = true;
+        }
+      } else if (this.fanType === 'fc' && this.fmFanObj && this.fmFanObj.group) {
+        // 显示单道风窗
+        if (this.group?.getObjectByName('jbfj-fm')) {
+          this.group?.remove(this.fmFanObj.group);
+        }
+        childGroup = this.fcFanObj?.group;
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = true;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = false;
+        }
+      } else {
+        if (this.group?.getObjectByName('jbfj-fc')) {
+          // @ts-ignore-next-line
+          this.group?.remove(this.fcFanObj.group);
+        }
+        if (this.group?.getObjectByName('jbfj-fm')) {
+          // @ts-ignore-next-line
+          this.group?.remove(this.fmFanObj.group);
+        }
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = false;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = false;
+        }
+        childGroup = null;
+      }
+      setTimeout(async () => {
+        if (childGroup) this.group?.add(childGroup);
+        const oldCameraPosition = { x: 615, y: 275, z: 744 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 0.08, y: 21.73, z: 78.45 },
+          { x: 0.13, y: -0.82, z: 0.236 },
+          this.model,
+          0.8
+        );
+        resolve(null);
+      }, 300);
+    });
+  }
+
+  clearFly() {
+    if (this.topSmoke) this.topSmoke.clearSmoke();
+    if (this.downSmoke) this.downSmoke.clearSmoke();
+    if (this.returnSmoke) this.returnSmoke.clearSmoke();
+  }
+
+  // 设置模型位置
+  setModalPosition() {
+    if (!this.group) return;
+    this.group.scale.set(0.7, 0.7, 0.7);
+    this.group.position.set(0, 6, -50);
+    this.group.rotation.y = Math.PI / 2;
+  }
+}
+export default ModelContext;

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.threejs.ts

@@ -0,0 +1,172 @@
+import * as THREE from 'three';
+import UseThree from '../../../../utils/threejs/useThree';
+import FanLocal from './fanLocal.threejs.base';
+import FanLocalDual from './fanLocalDual.threejs.base';
+import { animateCamera } from '/@/utils/threejs/util';
+import useEvent from '../../../../utils/threejs/useEvent';
+
+/** 模型总控制器 */
+let model: UseThree;
+/** 当前展示的具体模型的 Object3D 对象 */
+let group: THREE.Object3D;
+/** 当前展示的具体模型及状态组成的判断唯一性的key */
+let cacheKey: string = '';
+/** 具体模型内容列表，包含此模型总控制器下的所有可用的具体模型内容 */
+const modelContextList: {
+  /** 当前模型类型，在控制器下有多个具体模型时分辨它们 */
+  type: string;
+  /** 模型的具体内容，即负责模型导入、绘制的上下文对象，一个控制器可以新建多个 */
+  context?: FanLocal | FanLocalDual;
+}[] = [];
+const { mouseDownFn } = useEvent();
+
+/** 分发鼠标事件到具体实现方法 */
+function dispatchMouseEvent(event) {
+  if (event.button == 0 && model && group) {
+    mouseDownFn(model, group, event, () => {});
+  }
+}
+
+/** 为模型控制器设置非默认的摄像头位置 */
+function setCamera() {
+  // if (!model || !model.camera) return;
+  // model.camera.position.set(0, -2000, 1000);
+  // model.camera.far = 10000;
+  // model.orbitControls?.update();
+  // model.camera.updateProjectionMatrix();
+}
+
+/** 初始化模型CSS展示框的鼠标事件，应该在模型总控制器初始化后调用 */
+function initEventListender() {
+  if (!model) return;
+  model.canvasContainer?.addEventListener('mousedown', (e) => dispatchMouseEvent(e));
+  // model.orbitControls?.addEventListener('change', () => render());
+}
+
+/** 渲染并更新总模型 */
+// function render() {
+//   if (model && model.isRender && model.renderer) {
+//     // model.animationId = requestAnimationFrame(render);
+//     model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+//     model.renderer.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+//     model.stats?.update();
+//   }
+// }
+
+/** 刷新（再渲染）总模型 */
+// export function refreshModal() {
+//   render();
+//   // modelContextList.forEach((item) => {
+//   //   if (item.context) {
+//   //     item.context.render();
+//   //   }
+//   // });
+// }
+
+/** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, subModelType: string) {
+  return new Promise((resolve, reject) => {
+    if (!model) return reject('模型控制器未初始化');
+    // 判断是否是同一个/类模型
+    if (cacheKey === `${modelType}-${subModelType}`) return resolve(null);
+    cacheKey = `${modelType}-${subModelType}`;
+
+    modelContextList.forEach(({ type, context }) => {
+      if (!context || !context.group) return;
+
+      // 先把模型相关的内容隐藏，另起的隐藏子元素的代码是为了隐藏 CSS 元素
+      context.group.visible = false;
+      context.group.children.forEach((e) => {
+        e.visible = false;
+      });
+
+      if (modelType === type) {
+        group = context?.group as THREE.Object3D;
+        context.setModelType(subModelType);
+
+        setTimeout(async () => {
+          // 还没添加到控制器的添加进去
+          if (!model.scene?.getObjectByName(group.name) && group) {
+            model.scene?.add(group);
+          }
+          group.visible = true;
+          group.children.forEach((e) => {
+            e.visible = true;
+          });
+          const oldCameraPosition = { x: -693, y: 474, z: 398 };
+          const position = { x: 14.826074594663222, y: 16.901762713393836, z: 36.459944037951004 };
+          await animateCamera(
+            oldCameraPosition,
+            { x: 0, y: 0, z: 0 },
+            { x: position.x, y: position.y, z: position.z },
+            { x: 0, y: 0, z: 0 },
+            model,
+            0.8
+          );
+          resolve(null);
+        }, 400);
+      }
+    });
+  });
+}
+
+/** 挂载模型控制器，sceneSelctor表示放置模型的元素选择器，cssSelectors表示放置类似详情框的元素选择器，其中第一项需要是根元素选择器 */
+export function mountedThree(sceneSelctor: string, cssSelectors: string[]) {
+  return new Promise(async (resolve) => {
+    const [rootSelector] = cssSelectors;
+    model = new UseThree(sceneSelctor, rootSelector);
+    model.setEnvMap('test1.hdr');
+    /** @ts-ignore-next-line */
+    model.renderer.toneMappingExposure = 1.0;
+    if (model.renderer) {
+      model.renderer.sortObjects = true;
+    }
+
+    const model1 = new FanLocal(model);
+    await model1.mountedThree();
+    modelContextList.push({
+      type: 'fanLocal',
+      context: model1,
+    });
+    const model2 = new FanLocalDual(model);
+    await model2.mountedThree();
+    modelContextList.push({
+      type: 'fanLocalDual',
+      context: model2,
+    });
+
+    initEventListender();
+    setCamera();
+    model.animate();
+    resolve(null);
+  });
+}
+
+export const destroy = () => {
+  if (!model) return;
+  model.isRender = false;
+  modelContextList.forEach((item) => {
+    if (item.context) item.context.destroy();
+  });
+  model.destroy();
+};
+
+// 为了兼容性而添加的方法导出
+export function addText(d) {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.addText(d);
+  }
+}
+export function addCssText() {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.addCssText();
+  }
+}
+export function playSmoke(d) {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.playSmoke(d);
+  }
+}

src/views/vent/monitorManager/fanLocalMonitor/fanLocalDual.threejs.base.ts

@@ -0,0 +1,190 @@
+import * as THREE from 'three';
+import { setModalCenter } from '/@/utils/threejs/util';
+import Smoke from '../../comment/threejs/Smoke';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+// import { setModalCenter } from '/@/utils/threejs/util';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class ModelContext {
+  model;
+  // modelName = 'jbfj-hd';
+  modelName = 'jbfj-dual';
+  /** 本模型的根3D对象 */
+  group?: THREE.Object3D;
+  /** 本模型所包含的所有元素合集 */
+  private elements: unknown[] = [];
+  /** 本模型支持的 Object3DGroup 模块 */
+  private modules: {
+    /** 模块名称 */
+    name: string;
+    /** 控制该模块所用的上下文 */
+    context: THREE.Object3D;
+    /** 控制时行为声明 */
+    behavior: (context: THREE.Object3D) => void;
+  }[] = [];
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    // optional implementation
+  }
+
+  /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+  setModelType(modelType: string) {
+    this.modules.forEach(({ name, context, behavior }) => {
+      if (name === modelType) {
+        behavior(context);
+      }
+    });
+  }
+
+  /** 初始化css元素，将css元素选择器传入，该方法会将这些元素按顺序放入传入的锚点中 */
+  initCssElement() {
+    // selectors.forEach((selector, index) => {
+    //   const element = document.querySelector(selector) as HTMLElement;
+    //   if (element) {
+    //     const css3D = new CSS3DSprite(element);
+    //     this.cssSprites.push(css3D);
+    //     css3D.name = selector;
+    //     css3D.scale.set(0.05, 0.05, 0.05);
+    //     // const ff = gui.addFolder(`css元素${index}`);
+    //     // ff.add(css3D.position, 'x', -100, 100);
+    //     // ff.add(css3D.position, 'y', -100, 100);
+    //     // ff.add(css3D.position, 'z', -100, 100);
+    //     if (index < anchors.length) {
+    //       const [x, y, z] = anchors[index];
+    //       css3D.position.set(x, y, z);
+    //       this.group?.add(css3D);
+    //     } else {
+    //       console.warn(`指定的元素${selector}没有合适的位置放置`);
+    //     }
+    //   }
+    // });
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          this.addLight();
+          this.setModalPosition();
+          this.initModules();
+          setModalCenter(this.group);
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (!this.model) return;
+    this.elements.forEach((element) => {
+      this.model.clearGroup(element);
+    });
+  }
+
+  // 设置模型位置
+  setModalPosition() {
+    if (!this.group) return;
+    this.group.scale.set(0.7, 0.7, 0.7);
+    this.group.position.set(0, 6, -50);
+    this.group.rotation.y = Math.PI / 2;
+  }
+
+  // hideElements(eles: THREE.Object3D[]) {
+  //   eles.forEach((g) => {
+  //     g.visible = false;
+  //   });
+  // }
+  // showElements(eles: THREE.Object3D[]) {
+  //   eles.forEach((g) => {
+  //     g.visible = true;
+  //   });
+  // }
+
+  weakElements(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.opacityFactor = 0.4;
+      }
+      if (g instanceof CSS3DObject) {
+        g.element.style.setProperty('opacity', '0.5');
+      }
+    });
+  }
+  strongElements(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.opacityFactor = 0.75;
+      }
+      if (g instanceof CSS3DObject) {
+        g.element.style.setProperty('opacity', '1');
+      }
+    });
+  }
+
+  startAnimation(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.startSmoke();
+      }
+    });
+  }
+  stopAnimation(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.stopSmoke();
+      }
+    });
+  }
+
+  /** 核心方法，初始化本模型的各个模块，这些模块可以实现特定场景的展示、控制等功能 */
+  async initModules() {
+    if (this.elements.length > 0) return;
+    const curve1 = [
+      {
+        path0: new THREE.Vector3(10, 0, -10),
+        path1: new THREE.Vector3(20, 0, -10),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(10, 0, -10),
+        path1: new THREE.Vector3(10, 0, -20),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+    const group1 = new THREE.Group();
+    const smoke1 = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smoke1.setPath(curve1);
+    await smoke1.setPoints();
+    this.elements.push(smoke1);
+
+    const element = document.getElementById('inputBox') as HTMLElement;
+    if (element) {
+      const fanLocalCSS3D = new CSS3DObject(element);
+      fanLocalCSS3D.name = 'text1';
+      fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+      fanLocalCSS3D.rotation.y = -Math.PI / 2;
+      fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
+      group1.add(fanLocalCSS3D);
+      this.elements.push(fanLocalCSS3D);
+    }
+
+    this.modules.push({
+      name: 'state1',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.strongElements([smoke1]);
+      },
+    });
+  }
+}
+export default ModelContext;