[Feat 0000] 沙坪均压模型开发

src/utils/threejs/useThree.ts

@@ -126,9 +126,9 @@ class UseThree {
     //
     // const helper = new THREE.CameraHelper(this.camera);
     // this.scene?.add(helper);
-    // gui.add(this.camera.position, 'x', 0.00001, 10000);
-    // gui.add(this.camera.position, 'y', 0.00001, 10000);
-    // gui.add(this.camera.position, 'z', 0.00001, 10000);
+    // gui.add(this.camera.position, 'x', 0.0001, 5).step(0.01);
+    // gui.add(this.camera.position, 'y', 0.0001, 5).step(0.01);
+    // gui.add(this.camera.position, 'z', 0.0001, 5).step(0.01);
     // gui.add(this.camera, 'near', 0.01, 1).step(0.01);
     // gui.add(this.camera, 'far', 10, 100000);
     // gui.add(this.camera, 'fov', 0, 180);

src/views/vent/monitorManager/balancePressMonitor/balancePress.threejs.sp.ts

@@ -0,0 +1,164 @@
+import * as THREE from 'three';
+import { setModalCenter, getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import Smoke from '/@/views/vent/comment/threejs/Smoke';
+
+// 沙坪均压模型
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class balancePressSp {
+  model;
+  modelName = 'balancePressSp';
+  group: THREE.Object3D | null = null;
+  topSmoke: Smoke | null = null;
+  downSmoke: Smoke | null = null;
+  outSmoke: Smoke | null = null;
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(34, 7, -61);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    // gui.add(directionalLight.position, 'x', -200, 200);
+    // gui.add(directionalLight.position, 'y', -200, 200);
+    // gui.add(directionalLight.position, 'z', -200, 200);
+
+    const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 120);
+    pointLight5.position.set(75, -44, 75);
+    pointLight5.shadow.bias = 0.05;
+    this.group?.add(pointLight5);
+
+    const pointLight7 = new THREE.PointLight(0xffffff, 1, 1000);
+    pointLight7.position.set(-7, 100, 8.5);
+    pointLight7.shadow.bias = 0.05;
+    this.group?.add(pointLight7);
+
+    // gui.add(directionalLight.position, 'x', -100, 100);
+    // gui.add(directionalLight.position, 'y', -100, 100);
+    // gui.add(directionalLight.position, 'z', -100, 100);
+    // gui.add(pointLight5.position, 'x', -500, 500);
+    // gui.add(pointLight5.position, 'y', -500, 500);
+    // gui.add(pointLight5.position, 'z', -500, 500);
+  }
+
+  /* 添加监控数据 */
+  addText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const textArr = [
+      {
+        text: `煤矿巷道远程局部风机系统`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 50,
+        y: 105,
+      },
+      {
+        text: `进风量(m³/min):`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 160,
+      },
+      {
+        text: `${selectData.frontRearDP}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 290,
+        y: 160,
+      },
+      {
+        text: `供风量(m³/min): `,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 217,
+      },
+      {
+        text: ` ${selectData.sourcePressure}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 280,
+        y: 217,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: `煤炭科学技术研究院有限公司研制`,
+        font: 'normal 28px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 20,
+        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') as THREE.Mesh;
+      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.0135, 0.0135, 0.0135);
+        planeMesh.position.set(57.66, 0.81, 18.19);
+        this.group?.add(planeMesh);
+      }
+    });
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          this.group?.scale.set(0.1, 0.1, 0.1);
+          setModalCenter(this.group);
+          resolve(null);
+          this.addLight();
+        }
+      });
+    });
+  }
+
+  destroy() {
+    this.model.clearGroup(this.group);
+    this.model = null;
+    this.group = null;
+  }
+}
+export default balancePressSp;

src/views/vent/monitorManager/balancePressMonitor/balancePress.threejs.ts

@@ -1,13 +1,16 @@
 import UseThree from '../../../../utils/threejs/useThree';
 import balancePressBase from './balancePress.threejs.base';
 import balancePressTun from './balancePress.threejs.tun';
+import balancePressSp from './balancePress.threejs.sp';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
+import * as THREE from 'three';
 
 // 模型对象、 文字对象
-let model,
+let model: UseThree,
   balancePressBaseObj: balancePressBase | undefined,
   balancePressTunObj: balancePressTun | undefined,
+  balancePressSpObj: balancePressSp | undefined,
   group: THREE.Object3D | undefined,
   balancePressType = 'balancePressBase'; // workerFaceFiber
 
@@ -84,16 +87,25 @@ export const setModelType = (type) => {
           await animateCamera(
             oldCameraPosition,
             { x: 3.9025, y: 0.7782, z: 6.6307 },
-            {
-              x: 1.8176930000000002,
-              y: 1.1875376026870743,
-              z: 2.346245344747627,
-            },
-            {
-              x: 1.8176930000000002,
-              y: 0.03289700000000001,
-              z: 0.7697549999999999,
-            },
+            { x: 1.8177, y: 1.1875, z: 2.3462 },
+            { x: 1.8177, y: 0.0329, z: 0.7698 },
+            model,
+            1
+          );
+        }, 300);
+      }
+
+      resolve(null);
+    } else if (balancePressType === 'balancePressSp' && balancePressSpObj && balancePressSpObj.group) {
+      group = balancePressSpObj.group;
+      if (group) {
+        setTimeout(async () => {
+          model.scene.add(balancePressSpObj?.group);
+          await animateCamera(
+            { x: 27.9165, y: 17.3763, z: 51.3388 },
+            { x: 3.9025, y: 0.7782, z: 6.6307 },
+            { x: 0.1275, y: 2.4409, z: 1.627 },
+            { x: 0.1275, y: 0.3118, z: 0.3478 },
             model,
             1
           );
@@ -116,6 +128,9 @@ export const mountedThree = () => {
     balancePressTunObj = new balancePressTun(model);
     await balancePressTunObj.mountedThree();
 
+    balancePressSpObj = new balancePressSp(model);
+    await balancePressSpObj.mountedThree();
+
     addMouseEvent();
     model.animate();
     resolve(null);
@@ -130,6 +145,8 @@ export const destroy = () => {
     balancePressBaseObj = undefined;
     balancePressTunObj?.destroy();
     balancePressTunObj = undefined;
+    balancePressSpObj?.destroy();
+    balancePressSpObj = undefined;
     group = undefined;
     model.destroy();
     model = undefined;

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHomeBD.vue

@@ -470,7 +470,11 @@
     getAvePress();
     loading.value = true;
     mountedThree().then(async () => {
-      await setModelType('balancePressTun'); //balancePressBase
+      if (sysOrgCode === 'jsnyspmy') {
+        await setModelType('balancePressSp'); //balancePressBase
+      } else {
+        await setModelType('balancePressTun'); //balancePressBase
+      }
       loading.value = false;
       timer = null;
       await getMonitor(true);