[Mod 0000]主风机模型弹窗显示bug修复

src/utils/index.ts

@@ -184,7 +184,7 @@ export function getQueryVariable(url) {
     r,
     i = url.split('?')[1],
     s = {};
-  (t = i.split('&')), (r = null), (n = null);
+  ((t = i.split('&')), (r = null), (n = null));
   for (const o in t) {
     const u = t[o].indexOf('=');
     u !== -1 && ((r = t[o].substr(0, u)), (n = t[o].substr(u + 1)), (s[r] = n));

src/utils/threejs/parseModal.ts

@@ -1,5 +1,5 @@
-import * as THREE from "three";
-import { THREEMaterialType, IBaseProps, IGroupParams, IMeshParams, IPointLight } from "./type/types";
+import * as THREE from 'three';
+import { THREEMaterialType, IBaseProps, IGroupParams, IMeshParams, IPointLight } from './type/types';
 
 /**
  * glb模型并发加载工作原理
@@ -15,226 +15,222 @@ import { THREEMaterialType, IBaseProps, IGroupParams, IMeshParams, IPointLight }
 /**
  * 通过设置attributes index来复刻一个集合体
  */
-const genGeometry = (geometry: IMeshParams["geometry"], IMeshParams) => {
-    // console.log('目标------>',geometry);
-    const geom = new THREE.BufferGeometry();
-    const { 
-        attributes: { position, uv, normal },
-        index,
-    } = geometry;
-
-    
-    //处理几何坐标
-    if(uv){
-        const attributes = {
-            position: new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
-            uv: new THREE.BufferAttribute(uv.array, uv.itemSize, uv.normalized),
-            normal: new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized),
-        };
-        geom.attributes = attributes;
-    }else {
-        const attributes = {
-            position: new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
-            normal: new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized),
-        };
-        // geom.attributes['position'] = new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
-        // geom.attributes['normal'] = new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized)
-        geom.attributes = attributes;
-    }
-    
-    
-    geom.index = index ? new THREE.BufferAttribute(index.array, index.itemSize, index.normalized) : null;
-    return geom;
+const genGeometry = (geometry: IMeshParams['geometry'], IMeshParams) => {
+  // console.log('目标------>',geometry);
+  const geom = new THREE.BufferGeometry();
+  const {
+    attributes: { position, uv, normal },
+    index,
+  } = geometry;
+
+  //处理几何坐标
+  if (uv) {
+    const attributes = {
+      position: new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
+      uv: new THREE.BufferAttribute(uv.array, uv.itemSize, uv.normalized),
+      normal: new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized),
+    };
+    geom.attributes = attributes;
+  } else {
+    const attributes = {
+      position: new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
+      normal: new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized),
+    };
+    // geom.attributes['position'] = new THREE.BufferAttribute(position.array, position.itemSize, position.normalized),
+    // geom.attributes['normal'] = new THREE.BufferAttribute(normal.array, normal.itemSize, normal.normalized)
+    geom.attributes = attributes;
+  }
+
+  geom.index = index ? new THREE.BufferAttribute(index.array, index.itemSize, index.normalized) : null;
+  return geom;
 };
 
-
-
 /**
  * 根据传入纹理的参数生成真正有效的Material类型数据
  */
-const genMaterial = (mate: IMeshParams["material"]) => {
-    if (!mate) return undefined;
-    const multipleMaterial = Array.isArray(mate);
-    const material = multipleMaterial ? ([] as THREE.Material[]) : new THREE[mate.type as THREEMaterialType]();
-    //处理材质
-    //多个材质
-    if (multipleMaterial && Array.isArray(material)) {
-        console.log('有多个材质');
-        
-        for (const m of mate) {
-            const im = new THREE[m.type as THREEMaterialType]();
-
-            material.push(im);
+const genMaterial = (mate: IMeshParams['material']) => {
+  if (!mate) return undefined;
+  const multipleMaterial = Array.isArray(mate);
+  const material = multipleMaterial ? ([] as THREE.Material[]) : new THREE[mate.type as THREEMaterialType]();
+  //处理材质
+  //多个材质
+  if (multipleMaterial && Array.isArray(material)) {
+    console.log('有多个材质');
+
+    for (const m of mate) {
+      const im = new THREE[m.type as THREEMaterialType]();
+
+      material.push(im);
+    }
+  } else if (mate) {
+    //单个材质
+    Object.assign(material, mate);
+    for (const key in mate) {
+      if (Object.prototype.hasOwnProperty.call(mate, key)) {
+        const element = mate[key];
+        if (element && Object.prototype.toString.call(element === '[object Object]')) {
+          if (element.isTexture) {
+            const texture = new THREE.Texture();
+            for (const k in texture) {
+              if (Object.prototype.toString.call(texture[k]) === '[object Object]') {
+                if (k === 'center' || k === 'offset' || k === 'repeat') {
+                  texture[k] = new THREE.Vector2();
+                }
+                if (k === 'matrix') {
+                  texture[k] = new THREE.Matrix3();
+                }
+                if (k === 'source') {
+                  texture[k] = new THREE.Source(null);
+                }
+                Object.assign(texture[k], element[k]);
+              } else {
+                texture[k] = element[k];
+              }
+            }
+            material[key] = texture;
+          }
+          if (element.isColor) {
+            const color = new THREE.Color();
+            Object.assign(color, element);
+            material[key] = color;
+          }
+          if (key === 'normalScale') {
+            const vector2 = new THREE.Vector2();
+            Object.assign(vector2, element);
+            material[key] = vector2;
+          }
         }
-    } else if (mate) {
-        //单个材质
-        Object.assign(material, mate);
-        for (const key in mate) {
-            if (Object.prototype.hasOwnProperty.call(mate, key)) {
-                const element = mate[key];
-                if(element && Object.prototype.toString.call(element === '[object Object]')) {
-                    if( element.isTexture){
-                        const texture = new THREE.Texture()
-                        for (const k in texture) {
-                            if(Object.prototype.toString.call(texture[k]) === '[object Object]'){
-                                if(k==='center' || k==='offset' || k==='repeat'){
-                                    texture[k] = new THREE.Vector2()
-                                }
-                                if(k === 'matrix'){
-                                    texture[k] = new THREE.Matrix3()
-                                }
-                                if(k === 'source'){
-                                    texture[k] = new THREE.Source(null)
-                                }
-                                Object.assign(texture[k] , element[k]);
-                            }else {
-                                texture[k] =  element[k]
-                            }
-                        }
-                        material[key] = texture
-                    }
-                    if(element.isColor){
-                        const color = new THREE.Color()
-                        Object.assign(color, element);
-                        material[key] = color
-                    }
-                    if(key === 'normalScale'){
-                        const vector2 = new THREE.Vector2()
-                        Object.assign(vector2, element);
-                        material[key] = vector2
-                    }
-                }   
-            }   
-        }   
-    }    
-    return material;
+      }
+    }
+  }
+  return material;
 };
 
 /**
  * 处理基本属性转换(Object3D基类上的属性) matrix scale rotate translate position children  animations
  */
 const parseBaseParams = (params: IBaseProps, object: THREE.Object3D) => {
-    const matrix = new THREE.Matrix4();
-    matrix.elements = params.matrix.elements;
-    object.name = params.name;
-    object.matrix = matrix;
-    object.rotation.set(...params.rotation);
-    object.position.set(...params.position);
-    object.scale.set(...params.scale);
-    object.quaternion.set(...params.quaternion);
-    object.up.set(...params.up);
-    object.userData = params.userData;
-    object.visible = params.visible;
-
-    parseChildren(object, params.children);
-    genAnimations(object, params.animations);
-    // deleteObjectKeys(params, [
-    //     "name",
-    //     "matrix",
-    //     "rotation",
-    //     "position",
-    //     "scale",
-    //     "quaternion",
-    //     "up",
-    //     "userData",
-    //     "visible",
-    // ]);
-    // object.scale.x += 0.3;
-    // object.scale.y += 0.3;
-    // object.scale.z += 0.3;
+  const matrix = new THREE.Matrix4();
+  matrix.elements = params.matrix.elements;
+  object.name = params.name;
+  object.matrix = matrix;
+  object.rotation.set(...params.rotation);
+  object.position.set(...params.position);
+  object.scale.set(...params.scale);
+  object.quaternion.set(...params.quaternion);
+  object.up.set(...params.up);
+  object.userData = params.userData;
+  object.visible = params.visible;
+
+  parseChildren(object, params.children);
+  genAnimations(object, params.animations);
+  // deleteObjectKeys(params, [
+  //     "name",
+  //     "matrix",
+  //     "rotation",
+  //     "position",
+  //     "scale",
+  //     "quaternion",
+  //     "up",
+  //     "userData",
+  //     "visible",
+  // ]);
+  // object.scale.x += 0.3;
+  // object.scale.y += 0.3;
+  // object.scale.z += 0.3;
 };
 
 const parseMesh = (IMeshParams: IMeshParams) => {
-    const geometry = genGeometry(IMeshParams.geometry, IMeshParams);
-    const material = genMaterial(IMeshParams.material);
+  const geometry = genGeometry(IMeshParams.geometry, IMeshParams);
+  const material = genMaterial(IMeshParams.material);
 
-    const mesh = new THREE.Mesh(geometry, material);
-    parseBaseParams(IMeshParams, mesh);
-    return mesh;
+  const mesh = new THREE.Mesh(geometry, material);
+  parseBaseParams(IMeshParams, mesh);
+  return mesh;
 };
 
 const parseGroup = (params: IGroupParams) => {
-    const group = new THREE.Group();
-    parseBaseParams(params, group);
-    return group;
+  const group = new THREE.Group();
+  parseBaseParams(params, group);
+  return group;
 };
 
 const parsePointLight = (params: IPointLight) => {
-    const color = new THREE.Color();
-    // 色彩空间
-    // export type ColorSpace = NoColorSpace | SRGBColorSpace | LinearSRGBColorSpace;
-    // export type NoColorSpace = '';
-    // export type SRGBColorSpace = 'srgb';
-    // export type LinearSRGBColorSpace = 'srgb-linear';
-    //glb模型为了亮度恢复 使用srgb格式 所以颜色也使用同样格式 使其颜色模式一致
-    color.setRGB(params.color.r, params.color.g, params.color.b, "srgb-linear");
-
-    const pointLight = new THREE.PointLight(color, params.intensity, params.distance, params.decay);
-    parseBaseParams(params, pointLight);
-    return pointLight;
+  const color = new THREE.Color();
+  // 色彩空间
+  // export type ColorSpace = NoColorSpace | SRGBColorSpace | LinearSRGBColorSpace;
+  // export type NoColorSpace = '';
+  // export type SRGBColorSpace = 'srgb';
+  // export type LinearSRGBColorSpace = 'srgb-linear';
+  //glb模型为了亮度恢复 使用srgb格式 所以颜色也使用同样格式 使其颜色模式一致
+  color.setRGB(params.color.r, params.color.g, params.color.b, 'srgb-linear');
+
+  const pointLight = new THREE.PointLight(color, params.intensity, params.distance, params.decay);
+  parseBaseParams(params, pointLight);
+  return pointLight;
 };
 
 const parseObject3D = (params: IBaseProps) => {
-    const object = new THREE.Object3D();
-    parseBaseParams(params, object);
-    return object;
+  const object = new THREE.Object3D();
+  parseBaseParams(params, object);
+  return object;
 };
 
 const parseChildren = (object3D: THREE.Object3D, children: IBaseProps[]) => {
-    if (!children.length) return;
-    const objectList: THREE.Object3D[] = [];
-    for (const child of children) {
-        const { type } = child;
-        if (type === "Mesh") {
-            objectList.push(parseMesh(child as IMeshParams));
-        } else if (type === "Group") {
-            objectList.push(parseGroup(child));
-        } else if (type === "PointLight") {
-            objectList.push(parsePointLight(child as IPointLight));
-        } else if (type === "Object3D") {
-            objectList.push(parseObject3D(child));
-        } else {
-            throw new Error("出现了未处理的类型：" + type);
-        }
+  if (!children.length) return;
+  const objectList: THREE.Object3D[] = [];
+  for (const child of children) {
+    const { type } = child;
+    if (type === 'Mesh') {
+      objectList.push(parseMesh(child as IMeshParams));
+    } else if (type === 'Group') {
+      objectList.push(parseGroup(child));
+    } else if (type === 'PointLight') {
+      objectList.push(parsePointLight(child as IPointLight));
+    } else if (type === 'Object3D') {
+      objectList.push(parseObject3D(child));
+    } else {
+      throw new Error('出现了未处理的类型：' + type);
     }
+  }
 
-    object3D.add(...objectList);
+  object3D.add(...objectList);
 };
 /**
  * 生成动画
  */
-const genAnimations = (object3D: THREE.Object3D, sceneAnimations: IGroupParams["sceneAnimations"]) => {
-    if (!sceneAnimations) return;
-    const animations: THREE.AnimationClip[] = [];
-
-    for (const animation of sceneAnimations!) {
-        const clip = new THREE.AnimationClip(animation.name, animation.duration, [], animation.blendMode);
-        //@ts-ignore
-        for (const { name, times, values, type } of animation.tracks) {
-            let nreTrack;
-            if(type){
-                if(type === 'vector') nreTrack = new THREE.VectorKeyframeTrack(name, times as any, values as any);
-                if(type === 'quaternion') nreTrack = new THREE.QuaternionKeyframeTrack(name, times as any, values as any);
-            }else {
-                nreTrack = new THREE.QuaternionKeyframeTrack(name, times as any, values as any);
-            }
-
-            clip.tracks.push(nreTrack);
-        }
-
-        animations.push(clip);
+const genAnimations = (object3D: THREE.Object3D, sceneAnimations: IGroupParams['sceneAnimations']) => {
+  if (!sceneAnimations) return;
+  const animations: THREE.AnimationClip[] = [];
+
+  for (const animation of sceneAnimations!) {
+    const clip = new THREE.AnimationClip(animation.name, animation.duration, [], animation.blendMode);
+    //@ts-ignore
+    for (const { name, times, values, type } of animation.tracks) {
+      let nreTrack;
+      if (type) {
+        if (type === 'vector') nreTrack = new THREE.VectorKeyframeTrack(name, times as any, values as any);
+        if (type === 'quaternion') nreTrack = new THREE.QuaternionKeyframeTrack(name, times as any, values as any);
+      } else {
+        nreTrack = new THREE.QuaternionKeyframeTrack(name, times as any, values as any);
+      }
+
+      clip.tracks.push(nreTrack);
     }
 
-    object3D.animations = animations;
+    animations.push(clip);
+  }
+
+  object3D.animations = animations;
 };
 
 /**
  * 解析传入的模型参数生成有效的three.js物体
  */
 export const parseModel = (params: IGroupParams) => {
-    const model = parseGroup(params);
-    // model.position.x += 10;
-    genAnimations(model, params.sceneAnimations);
-    // console.log("解析完:", model);
-    return model;
+  const model = parseGroup(params);
+  // model.position.x += 10;
+  genAnimations(model, params.sceneAnimations);
+  // console.log("解析完:", model);
+  return model;
 };

src/views/vent/monitorManager/mainFanMonitor/components/entryThree.vue

@@ -6,10 +6,7 @@
       class="threejs-Object-CSS"
       style="position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none"
     >
-      <div
-        style="position: relative"
-        v-if="hasPermission('mainFan:hideCss3DModal') && selectData['modalTyoe'] && selectData['modalTyoe'] !== 'mainWindRect-Inverse'"
-      >
+      <div style="position: relative; display: none" v-if="selectData['modalTyoe'] && selectData['modalTyoe'] !== 'mainWindRect-Inverse'">
         <template v-if="!fanSwitchoverSimulation">
           <div class="elementTag" id="inputBox1" v-if="backMonitorIsShow">
             <div class="elementContent elementContent-r">

src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts

@@ -101,9 +101,7 @@ const mousemove = () => {
 /* 添加监控数据 */
 export const addText = () => {
   if (!mainWindObj) return;
-  if (modalType.includes('mainWindRect') && mainWindObj) {
-    return mainWindObj.addCssText.call(mainWindObj);
-  } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
+  if (modalType === 'mainXjWindRect' && mainXjWindObj) {
     return mainXjWindObj.addCssText.call(mainXjWindObj);
   } else if (modalType === 'mainLjWindRect' && mainLjWindObj) {
     return mainLjWindObj.addCssText.call(mainLjWindObj);
@@ -111,20 +109,30 @@ export const addText = () => {
     return mainLj3WindObj.addCssText.call(mainLj3WindObj);
   } else if (modalType === 'mainLjDtWindRect' && mainFanLjDtObj) {
     return mainFanLjDtObj.addCssText.call(mainFanLjDtObj);
+  } else if (modalType.includes('mainWindRect') && mainWindObj) {
+    return mainWindObj.addCssText.call(mainWindObj);
   }
 };
 
+const stopSmoke = () => {
+  mainWindObj?.stopSmoke();
+  mainXjWindObj?.stopSmoke();
+  mainLj3WindObj?.stopSmoke();
+  mainFanLjDtObj?.stopSmoke();
+  mainLjWindObj?.stopSmoke();
+};
+
 /* 刷新echarts曲线图 */
 export const resetEcharts = (selectData) => {
   if (!mainWindObj) return;
-  if (modalType.includes('mainWindRect') && mainWindObj) {
-    return mainWindObj.addEcharts.call(mainWindObj);
-  } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
+  if (modalType === 'mainXjWindRect' && mainXjWindObj) {
     return mainXjWindObj.addEcharts.call(mainXjWindObj);
   } else if (modalType === 'mainLjWindRect' && mainLjWindObj) {
     return mainLjWindObj.addEcharts.call(mainLjWindObj);
   } else if (modalType === 'mainWindRect3' && mainLj3WindObj) {
     return mainLj3WindObj.addEcharts.call(mainLj3WindObj);
+  } else if (modalType.includes('mainWindRect') && mainWindObj) {
+    return mainWindObj.addEcharts.call(mainWindObj);
   }
 };
 
@@ -250,9 +258,7 @@ export const playAnimate = async (selectData, duration?) => {
 
   let mainObj: mainWindRect | mainXjWindRect | mainWindLj3 | mainWindLjDt | undefined;
 
-  if (modalType.includes('mainWindRect')) {
-    mainObj = mainWindObj;
-  } else if (modalType === 'mainXjWindRect') {
+  if (modalType === 'mainXjWindRect') {
     mainObj = mainXjWindObj;
   } else if (modalType === 'mainLjWindRect') {
     mainObj = mainLjWindObj;
@@ -260,7 +266,10 @@ export const playAnimate = async (selectData, duration?) => {
     mainObj = mainLj3WindObj;
   } else if (modalType === 'mainLjDtWindRect') {
     mainObj = mainFanLjDtObj;
+  } else if (modalType.includes('mainWindRect')) {
+    mainObj = mainWindObj;
   }
+
   if (selectData && mainObj) {
     if (selectData['Fan1FreqHz'] == undefined || selectData['Fan1FreqHz'] == null || selectData['Fan1FreqHz'] == '')
       selectData['Fan1FreqHz'] = VENT_PARAM['fanSwitchoverSimulation'] ? 0 : 50;
@@ -634,36 +643,13 @@ export const setModelType = (type) => {
   modalType = type;
   return new Promise((resolve) => {
     // 停止气流动画
-    mainWindObj?.stopSmoke();
-    mainXjWindObj?.stopSmoke();
-    mainLj3WindObj?.stopSmoke();
-    mainFanLjDtObj?.stopSmoke();
-    mainLjWindObj?.stopSmoke();
+    stopSmoke();
     if (group) model?.scene?.remove(group);
-    if (modalType.includes('mainWindRect') && mainWindObj && mainWindObj.group) {
-      (<UseThree>model).startAnimation = mainWindObj.render.bind(mainWindObj);
-      group = mainWindObj.group;
-      setTimeout(async () => {
-        resolve(null);
-        // const position = mainWindObj.group.position;
-        const position = new THREE.Vector3(-1.0127, -3.4717, -7.864);
-        const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
-        await animateCamera(
-          oldCameraPosition,
-          { x: -3.41, y: -29.01, z: 8.84 },
-          { x: -1.7927, y: 70.8399, z: 120.8451 },
-          { x: position.x, y: position.y, z: position.z },
-          model,
-          0.8
-        );
-        if (group) model?.scene?.add(group);
-      }, 300);
-    } else if (modalType === 'mainXjWindRect' && mainXjWindObj && mainXjWindObj.group) {
+    if (modalType === 'mainXjWindRect' && mainXjWindObj && mainXjWindObj.group) {
       (<UseThree>model).startAnimation = mainXjWindObj.render.bind(mainXjWindObj);
       group = mainXjWindObj.group;
       setTimeout(async () => {
         resolve(null);
-        // const position = mainWindObj.group.position;
         const position = new THREE.Vector3(12.96, 23.17, -23.16);
         const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
         await animateCamera(
@@ -681,7 +667,6 @@ export const setModelType = (type) => {
       group = mainLjWindObj.group;
       setTimeout(async () => {
         resolve(null);
-        // const position = mainWindObj.group.position;
         const position = new THREE.Vector3(-32.98, -4.15, -8.14);
         const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
         await animateCamera(
@@ -699,12 +684,12 @@ export const setModelType = (type) => {
       group = mainLj3WindObj.group;
       setTimeout(async () => {
         resolve(null);
-        const position = new THREE.Vector3(2.815, -7.014, -5.985);
+        const position = new THREE.Vector3(5.31, 1.337, 15.4);
         const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
         await animateCamera(
           oldCameraPosition,
           { x: -3.41, y: -29.01, z: 8.84 },
-          { x: 5.128, y: 72.363, z: 93.655 },
+          { x: 4.67, y: 95.7, z: 109.5 },
           { x: position.x, y: position.y, z: position.z },
           model,
           0.8
@@ -728,6 +713,23 @@ export const setModelType = (type) => {
         );
         if (group) model?.scene?.add(group);
       }, 300);
+    } else if (modalType.includes('mainWindRect') && mainWindObj && mainWindObj.group) {
+      (<UseThree>model).startAnimation = mainWindObj.render.bind(mainWindObj);
+      group = mainWindObj.group;
+      setTimeout(async () => {
+        resolve(null);
+        const position = new THREE.Vector3(-1.0127, -3.4717, -7.864);
+        const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: -3.41, y: -29.01, z: 8.84 },
+          { x: -1.7927, y: 70.8399, z: 120.8451 },
+          { x: position.x, y: position.y, z: position.z },
+          model,
+          0.8
+        );
+        if (group) model?.scene?.add(group);
+      }, 300);
     }
   });
 };

src/views/vent/monitorManager/mainFanMonitor/mainWind.li3.threejs.ts

@@ -75,47 +75,55 @@ class mainWindLj3 {
     const fengji3 = fengji?.getObjectByName('Feng3_2');
 
     // #1
+    const inputBox = document.getElementById('inputBox') as HTMLElement;
     if (!this.group.getObjectByName('monitorText1')) {
       const worldPosition = new THREE.Vector3();
       fengji1?.getObjectByName('Feng1_7')?.getWorldPosition(worldPosition);
-      const element = document.getElementById('inputBox') as HTMLElement;
-      if (element) {
-        const mainCSS3D = new CSS3DObject(element);
+
+      if (inputBox) {
+        const mainCSS3D = new CSS3DObject(inputBox);
         mainCSS3D.name = 'monitorText1';
         mainCSS3D.scale.set(0.09, 0.09, 0.09);
-        mainCSS3D.position.set(worldPosition.x + 12, worldPosition.y - 20, worldPosition.z - 20);
-        mainCSS3D.lookAt(worldPosition.x + 12, worldPosition.y - 0, worldPosition.z + 2);
+        mainCSS3D.position.set(worldPosition.x + 15, worldPosition.y - 20, worldPosition.z - 20);
+        mainCSS3D.lookAt(worldPosition.x + 15, worldPosition.y - 0, worldPosition.z + 2);
         this.group.add(mainCSS3D);
       }
+    } else if (!inputBox) {
+      this.group.getObjectByName('monitorText1')?.removeFromParent();
     }
-    debugger;
+
     //#2
+    const inputBox1 = document.getElementById('inputBox1') as HTMLElement;
     if (!this.group.getObjectByName('monitorText2')) {
       const worldPosition = new THREE.Vector3();
       fengji2?.getObjectByName('Feng2_44')?.getWorldPosition(worldPosition);
-      const element = document.getElementById('inputBox1') as HTMLElement;
-      if (element) {
-        const mainCSS3D = new CSS3DObject(element);
+      if (inputBox1) {
+        const mainCSS3D = new CSS3DObject(inputBox1);
         mainCSS3D.name = 'monitorText2';
         mainCSS3D.scale.set(0.09, 0.09, 0.09);
         mainCSS3D.position.set(worldPosition.x + 12, worldPosition.y - 20, worldPosition.z - 20);
         mainCSS3D.lookAt(worldPosition.x + 12, worldPosition.y - 0, worldPosition.z + 2);
         this.group.add(mainCSS3D);
       }
+    } else if (!inputBox1) {
+      this.group.getObjectByName('monitorText2')?.removeFromParent();
     }
     // #3
+    const inputBox2 = document.getElementById('inputBox2') as HTMLElement;
     if (!this.group.getObjectByName('monitorText3')) {
       const worldPosition = new THREE.Vector3();
       fengji3?.getObjectByName('Feng3_43')?.getWorldPosition(worldPosition);
-      const element = document.getElementById('inputBox2') as HTMLElement;
-      if (element) {
-        const mainCSS3D = new CSS3DObject(element);
+
+      if (inputBox2) {
+        const mainCSS3D = new CSS3DObject(inputBox2);
         mainCSS3D.name = 'monitorText3';
         mainCSS3D.scale.set(0.09, 0.09, 0.09);
         mainCSS3D.position.set(worldPosition.x + 12, worldPosition.y - 20, worldPosition.z - 20);
         mainCSS3D.lookAt(worldPosition.x + 12, worldPosition.y - 0, worldPosition.z + 2);
         this.group.add(mainCSS3D);
       }
+    } else if (!inputBox2) {
+      this.group.getObjectByName('monitorText3')?.removeFromParent();
     }
   }
 
@@ -719,8 +727,6 @@ class mainWindLj3 {
     this.group = new THREE.Group();
     return new Promise(async (resolve) => {
       this.model.setGLTFModel(['bg1', 'mainWindLj3'], this.group).then(async () => {
-        // this.group = gltf[0];
-
         console.log(this.group);
         this.group?.position.set(-0.44, 19.88, 22.37);
         const mainWindLj3 = this.group?.getObjectByName('mainWindLj3') as THREE.Group;

src/views/vent/monitorManager/mainFanMonitor/mainWind.lj.threejs.ts

@@ -87,7 +87,6 @@ class mainXjWindRect {
         this.group.add(mainCSS3D);
       }
     }
-
     if (!this.group.getObjectByName('monitorText4')) {
       const worldPosition = new THREE.Vector3();
       const fbmGroup = this.group?.getObjectByName('fbm') as THREE.Group;
@@ -107,10 +106,12 @@ class mainXjWindRect {
   }
   clearCssText() {
     if (this.group) {
-      const mainCSS3D1 = this.group.getObjectByName('monitorText2');
-      const mainCSS3D2 = this.group.getObjectByName('monitorText3');
+      const mainCSS3D1 = this.group.getObjectByName('monitorText1');
+      const mainCSS3D2 = this.group.getObjectByName('monitorText2');
+      const mainCSS3D4 = this.group.getObjectByName('monitorText4');
       if (mainCSS3D1) this.group.remove(mainCSS3D1);
       if (mainCSS3D2) this.group.remove(mainCSS3D2);
+      if (mainCSS3D4) this.group.remove(mainCSS3D4);
     }
   }
 

src/views/vent/monitorManager/mainFanMonitor/mainWind.threejs.ts

@@ -79,51 +79,57 @@ class mainWindRect {
         }
       }
     } else {
+      const inputBox = document.getElementById('inputBox') as HTMLElement;
       if (!this.group.getObjectByName('monitorText1')) {
         const worldPosition = new THREE.Vector3();
         ztfjGroup?.getObjectByName('Cylinder1042')?.getWorldPosition(worldPosition);
-        const element = document.getElementById('inputBox') as HTMLElement;
-        if (element) {
-          const mainCSS3D = new CSS3DObject(element);
+        if (inputBox) {
+          const mainCSS3D = new CSS3DObject(inputBox);
           mainCSS3D.name = 'monitorText1';
           mainCSS3D.scale.set(0.09, 0.09, 0.09);
-          // mainCSS3D.position.set(23.78, 18.18, -6.85);
-          mainCSS3D.position.set(worldPosition.x + 12, worldPosition.y - 10, worldPosition.z - 20);
-          mainCSS3D.lookAt(worldPosition.x + 12, worldPosition.y - 0, worldPosition.z + 2);
+          mainCSS3D.position.set(worldPosition.x + 7, worldPosition.y - 10, worldPosition.z - 20);
+          mainCSS3D.lookAt(worldPosition.x + 7, worldPosition.y - 0, worldPosition.z + 2);
           this.group.add(mainCSS3D);
         }
+      } else if (!inputBox) {
+        this.group.getObjectByName('monitorText1')?.removeFromParent();
       }
+
+      const inputBox1 = document.getElementById('inputBox1') as HTMLElement;
       if (!this.group.getObjectByName('monitorText2')) {
         const worldPosition = new THREE.Vector3();
         ztfjGroup?.getObjectByName('Cylinder396')?.getWorldPosition(worldPosition);
-        const element = document.getElementById('inputBox1') as HTMLElement;
-        if (element) {
-          const mainCSS3D = new CSS3DObject(element);
+        if (inputBox1) {
+          const mainCSS3D = new CSS3DObject(inputBox1);
           mainCSS3D.name = 'monitorText2';
           mainCSS3D.scale.set(0.09, 0.09, 0.09);
-          // mainCSS3D.position.set(23.78, 18.18, 16.82);
           mainCSS3D.position.set(worldPosition.x + 12, worldPosition.y - 10, worldPosition.z - 20);
           mainCSS3D.lookAt(worldPosition.x + 12, worldPosition.y - 0, worldPosition.z + 2);
-          // mainCSS3D.lookAt(23.78, 20, 20.82);
           this.group.add(mainCSS3D);
         }
+      } else if (!inputBox1) {
+        this.group.getObjectByName('monitorText2')?.removeFromParent();
       }
 
+      const fbm = document.getElementById('fbm') as HTMLElement;
       if (!this.group.getObjectByName('monitorText4')) {
         const worldPosition = new THREE.Vector3();
         const fbmGroup = this.group?.getObjectByName('fbm') as THREE.Group;
         if (fbmGroup) {
           fbmGroup?.getObjectByName('Box022')?.getWorldPosition(worldPosition);
-          const element = document.getElementById('fbm') as HTMLElement;
-          if (element) {
-            const mainCSS3D = new CSS3DObject(element);
+          if (fbm) {
+            const mainCSS3D = new CSS3DObject(fbm);
             mainCSS3D.name = 'monitorText4';
             mainCSS3D.scale.set(0.07, 0.07, 0.07);
             mainCSS3D.position.set(worldPosition.x + 20, worldPosition.y - 8, worldPosition.z - 20);
             mainCSS3D.lookAt(worldPosition.x + 20, worldPosition.y - 0, worldPosition.z + 2);
             this.group.add(mainCSS3D);
+          } else {
+            this.group.getObjectByName('monitorText4')?.removeFromParent();
           }
         }
+      } else if (!fbm) {
+        this.group.getObjectByName('monitorText4')?.removeFromParent();
       }
     }
   }
@@ -132,8 +138,10 @@ class mainWindRect {
     if (this.group) {
       const mainCSS3D1 = this.group.getObjectByName('monitorText1');
       const mainCSS3D2 = this.group.getObjectByName('monitorText2');
+      const mainCSS3D4 = this.group.getObjectByName('monitorText4');
       if (mainCSS3D1) this.group.remove(mainCSS3D1);
       if (mainCSS3D2) this.group.remove(mainCSS3D2);
+      if (mainCSS3D4) this.group.remove(mainCSS3D4);
     }
   }
 

src/views/vent/monitorManager/mainFanMonitor/mainWind.xj.threejs.ts

@@ -111,8 +111,10 @@ class mainXjWindRect {
     if (this.group) {
       const mainCSS3D1 = this.group.getObjectByName('monitorText2');
       const mainCSS3D2 = this.group.getObjectByName('monitorText3');
+      const mainCSS3D4 = this.group.getObjectByName('monitorText4');
       if (mainCSS3D1) this.group.remove(mainCSS3D1);
       if (mainCSS3D2) this.group.remove(mainCSS3D2);
+      if (mainCSS3D4) this.group.remove(mainCSS3D4);
     }
   }