Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -65,7 +65,7 @@ function initEventListender() {
 // }
 
 /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
-export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, subModelType: string) {
+export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, subModelType: string, data?: any) {
   return new Promise((resolve, reject) => {
     if (!model) return reject('模型控制器未初始化');
     // 判断是否是同一个/类模型
@@ -84,7 +84,7 @@ export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, su
 
       if (modelType === type) {
         group = context?.group as THREE.Object3D;
-        context.setModelType(subModelType);
+        context.setModelType(subModelType, data);
 
         setTimeout(async () => {
           // 还没添加到控制器的添加进去

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

@@ -14,7 +14,6 @@ class ModelContext {
   group?: THREE.Object3D;
   /** 本模型所包含的所有元素合集 */
   private elements: unknown[] = [];
-  private cssSprites: CSS3DSprite[] = [];
   /** 本模型支持的 Object3DGroup 模块 */
   private modules: {
     /** 模块名称 */
@@ -34,7 +33,7 @@ class ModelContext {
   }
 
   /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
-  setModelType(modelType: string) {
+  setModelType(modelType: string, data: any) {
     this.modules.forEach(({ name, context, behavior }) => {
       if (name === modelType) {
         behavior(context);
@@ -47,11 +46,10 @@ class ModelContext {
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.group = gltf[0];
         if (this.group) {
-          this.group.scale.set(2, 2, 2);
+          // this.group.scale.set(2, 2, 2);
           // setModalCenter(this.group);
           this.addLight();
           this.setModelPosition();
-          this.initCssElement();
           this.initModules().then(resolve);
         }
       });
@@ -180,12 +178,59 @@ class ModelContext {
     await smokeTunnelMajor.setPoints();
     this.group?.add(smokeTunnelMajor.points);
 
+    const fanRightSelectors = [
+      {
+        query: '#inputBox2',
+        position: [-70, 0, -15],
+        scale: 0.1,
+      },
+      {
+        query: '#T1_1',
+        position: [100, 15, -42],
+        scale: 0.2,
+      },
+      {
+        query: '#T1_2',
+        position: [30, 15, -37],
+        scale: 0.175,
+      },
+    ];
+    const fanLeftSelectors = [
+      {
+        query: '#inputBox3',
+        position: [-70, 0, 36],
+        scale: 0.1,
+      },
+      {
+        query: '#T2_1',
+        position: [110, 15, -80],
+        scale: 0.2,
+      },
+      {
+        query: '#T2_2',
+        position: [47, 15, -74],
+        scale: 0.175,
+      },
+    ];
+    const commonSelectors = [
+      {
+        query: '#T3',
+        position: [-40, 15, -65],
+        scale: 0.15,
+      },
+    ];
+    const fanLeftSprites = this.initCssElement(fanLeftSelectors);
+    const fanRightSprites = this.initCssElement(fanRightSelectors);
+    const commonSprites = this.initCssElement(commonSelectors);
+
     // 双巷道的通风机都开启有4种情况
     this.modules.push({
       name: 'fan1RightOpen&fan1LeftOpen',
       context: group1,
       behavior: () => {
+        // this.weakElements(this.elements);
         this.stopAnimation(this.elements).then(() => {
+          // this.strongElements();
           this.startAnimation([smokeFan1Right, smokeFan1Left, smokeTunnelRight, smokeTunnelMajor]);
         });
       },
@@ -254,48 +299,38 @@ class ModelContext {
         });
       },
     });
-  }
 
-  /** 初始化css元素，将css元素选择器传入，该方法会将这些元素按顺序放入传入的锚点中 */
-  initCssElement() {
-    const selectors = [
-      {
-        query: '#inputBox2',
-        position: [-90, 9, -10],
-      },
-      {
-        query: '#inputBox3',
-        position: [-90, 9, 30],
-      },
-      {
-        query: '#T1_1',
-        position: [80, 9, -10],
-      },
-      {
-        query: '#T1_2',
-        position: [20, 9, -10],
-      },
-      {
-        query: '#T2_1',
-        position: [-40, 9, -50],
-      },
-      {
-        query: '#T2_2',
-        position: [30, 9, -50],
+    // 只有一个风机启动有2种告示牌情况
+    this.modules.push({
+      name: 'fanLeftStrong',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.strongElements([...fanLeftSprites, ...commonSprites]);
       },
-      {
-        query: '#T3',
-        position: [58, 9, -50],
+    });
+    this.modules.push({
+      name: 'fanRightStrong',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.strongElements([...fanRightSprites, ...commonSprites]);
       },
-    ];
-    selectors.forEach(({ query, position }, index) => {
+    });
+  }
+
+  /** 初始化css元素，将css元素选择器传入，该方法会将这些元素按顺序放入传入的锚点中 */
+  initCssElement(selectors: { query: string; position: number[]; scale: number }[]) {
+    const arr: CSS3DSprite[] = [];
+    selectors.forEach(({ query, position, scale }) => {
       const element = document.querySelector(query) as HTMLElement;
       if (element) {
         const css3D = new CSS3DSprite(element);
-        this.cssSprites.push(css3D);
+        this.elements.push(css3D);
+        arr.push(css3D);
         css3D.name = query;
-        css3D.scale.set(0.05, 0.05, 0.05);
-        // const ff = gui.addFolder(`css元素${index}`);
+        css3D.scale.set(scale, scale, scale);
+        // const ff = gui.addFolder(`css元素${query}`);
         // ff.add(css3D.position, 'x', -100, 100);
         // ff.add(css3D.position, 'y', -100, 100);
         // ff.add(css3D.position, 'z', -100, 100);
@@ -303,6 +338,8 @@ class ModelContext {
         this.group?.add(css3D);
       }
     });
+
+    return arr;
   }
 
   /** 生成适用于 Smoke 的曲线数据，输入途径点，输出路径，如果是进风类型，首个线段将有扩散效果，出风则是末尾线段有扩散效果 */