[Wip 0000] 局部通风机双巷道模型添加动画及控制器

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

@@ -73,9 +73,7 @@ class ModelContext {
           // setModalCenter(this.group);
           this.addLight();
           this.setModelPosition();
-          this.initModules();
-          this.startAnimation(this.elements);
-          resolve(null);
+          this.initModules().then(resolve);
         }
       });
     });
@@ -115,7 +113,7 @@ class ModelContext {
   weakElements(eles: unknown[]) {
     eles.forEach((g) => {
       if (g instanceof Smoke) {
-        g.opacityFactor = 0.4;
+        g.oldOpacityFactor = 0.4;
       }
       if (g instanceof CSS3DObject) {
         g.element.style.setProperty('opacity', '0.5');
@@ -125,7 +123,7 @@ class ModelContext {
   strongElements(eles: unknown[]) {
     eles.forEach((g) => {
       if (g instanceof Smoke) {
-        g.opacityFactor = 0.75;
+        g.oldOpacityFactor = 0.75;
       }
       if (g instanceof CSS3DObject) {
         g.element.style.setProperty('opacity', '1');
@@ -149,37 +147,86 @@ class ModelContext {
   }
 
   /** 核心方法，初始化本模型的各个模块，这些模块可以实现特定场景的展示、控制等功能 */
-  initModules() {
+  async initModules() {
     if (this.elements.length > 0) return;
     // 右侧风机-主风机进风
-    const curveFan1Right = [
-      {
-        path0: new THREE.Vector3(-85.685, 4.208, 43.895),
-        path1: new THREE.Vector3(-85.685, 2.208, 41.895),
-        isSpread: true,
-        spreadDirection: -1, // 1是由小变大，-1是由大变小
-      },
-      {
-        path0: new THREE.Vector3(-85.685, 2.208, 41.895),
-        path1: new THREE.Vector3(-85.685, 2.188, 35.327),
-        isSpread: false,
-        spreadDirection: 1,
-      },
-      {
-        path0: new THREE.Vector3(-85.685, 2.188, 35.327),
-        path1: new THREE.Vector3(-85.685, 0.784, 33.086),
-        isSpread: false,
-        spreadDirection: 1,
-      },
-    ];
+    const curveFan1Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 4.208, 43.895),
+        new THREE.Vector3(-85.685, 2.208, 41.895),
+        new THREE.Vector3(-85.685, 2.188, 35.327),
+        new THREE.Vector3(-85.685, 0.784, 33.086),
+        new THREE.Vector3(-85.685, 0.784, 27.848),
+        new THREE.Vector3(-85.685, 4.724, 21.565),
+        new THREE.Vector3(-85.685, 4.724, -12.993),
+        new THREE.Vector3(-26.191, 4.724, -13.232),
+        new THREE.Vector3(-25.608, 4.724, -47.022),
+        new THREE.Vector3(80.038, 4.724, -47.022),
+      ],
+      true
+    );
+    // 右侧风机-备风机进风
+    const curveFan2Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 1.475, 43.895),
+        new THREE.Vector3(-85.685, -0.525, 41.895),
+        new THREE.Vector3(-85.685, -0.525, 35.327),
+        new THREE.Vector3(-85.685, 0.784, 33.086),
+        new THREE.Vector3(-85.685, 0.784, 27.848),
+        new THREE.Vector3(-85.685, 4.724, 21.565),
+        new THREE.Vector3(-85.685, 4.724, -12.993),
+        new THREE.Vector3(-26.191, 4.724, -13.232),
+        new THREE.Vector3(-25.608, 4.724, -47.022),
+        new THREE.Vector3(80.038, 4.724, -47.022),
+      ],
+      true
+    );
+    // 左侧风机-主风机进风
+    const curveFan1Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 4.188, 4.729),
+        new THREE.Vector3(-85.685, 2.188, 2.729),
+        new THREE.Vector3(-85.685, 2.188, -3.84),
+        new THREE.Vector3(-85.685, 0.784, -6.081),
+        new THREE.Vector3(-85.685, 0.784, -12.912),
+        new THREE.Vector3(80.251, 0.784, -12.912),
+      ],
+      true
+    );
+    // 左侧风机-备风机进风
+    const curveFan2Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 1.475, 4.729),
+        new THREE.Vector3(-85.685, -0.525, 2.729),
+        new THREE.Vector3(-85.685, -0.508, -3.84),
+        new THREE.Vector3(-85.685, 0.784, -6.081),
+        new THREE.Vector3(-85.685, 0.784, -12.912),
+        new THREE.Vector3(80.251, 0.784, -12.912),
+      ],
+      true
+    );
     const group1 = new THREE.Group();
-    const smoke1 = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
-    smoke1.setPath(curveFan1Right);
-    this.elements.push(smoke1);
+    const smokeFan1Right = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan1Right.setPath(curveFan1Right);
+    this.elements.push(smokeFan1Right);
+    const smokeFan2Right = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan2Right.setPath(curveFan2Right);
+    this.elements.push(smokeFan2Right);
+    const smokeFan1Left = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan1Left.setPath(curveFan1Left);
+    this.elements.push(smokeFan1Left);
+    const smokeFan2Left = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan2Left.setPath(curveFan2Left);
+    this.elements.push(smokeFan2Left);
 
-    smoke1.setPoints().then(() => {
-      this.group?.add(smoke1.points);
-    });
+    await smokeFan1Right.setPoints();
+    this.group?.add(smokeFan1Right.points);
+    await smokeFan2Right.setPoints();
+    this.group?.add(smokeFan2Right.points);
+    await smokeFan1Left.setPoints();
+    this.group?.add(smokeFan1Left.points);
+    await smokeFan2Left.setPoints();
+    this.group?.add(smokeFan2Left.points);
     // const element = document.getElementById('inputBox') as HTMLElement;
     // if (element) {
     //   const fanLocalCSS3D = new CSS3DObject(element);
@@ -192,13 +239,68 @@ class ModelContext {
     // }
 
     this.modules.push({
-      name: 'state1',
+      name: 'fan1RightOpen',
       context: group1,
       behavior: () => {
         this.weakElements(this.elements);
-        this.strongElements([smoke1]);
+        this.startAnimation([smokeFan1Right]);
+        this.strongElements([smokeFan1Right]);
       },
     });
+    this.modules.push({
+      name: 'fan2RightOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan2Right]);
+        this.strongElements([smokeFan2Right]);
+      },
+    });
+    this.modules.push({
+      name: 'fan1LeftOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan1Left]);
+        this.strongElements([smokeFan1Left]);
+      },
+    });
+    this.modules.push({
+      name: 'fan2LeftOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan2Left]);
+        this.strongElements([smokeFan2Left]);
+      },
+    });
+  }
+
+  /** 生成适用于 Smoke 的曲线数据，输入途径点，输出路径，如果是进风类型，首个线段将有扩散效果，出风则是末尾线段有扩散效果 */
+  generateSmokePath(points: THREE.Vector3[], airIn?: boolean, airOut?: boolean) {
+    const result: any[] = [];
+    for (let index = 1; index < points.length; index++) {
+      const path0 = points[index - 1];
+      const path1 = points[index];
+      const path = {
+        path0,
+        path1,
+        isSpread: false,
+        spreadDirection: 0,
+      };
+      if (airIn) {
+        // 首个线段需要扩散，由大变小
+        path.isSpread = index === 1;
+        path.spreadDirection = -1;
+      }
+      if (airOut) {
+        // 首个线段需要扩散，由小变大
+        path.isSpread = index === points.length - 1;
+        path.spreadDirection = 1;
+      }
+      result.push(path);
+    }
+    return result;
   }
 }
 export default ModelContext;