hn_bigScreen/public/webWater/index.js

// 从这里开始
var h1 = null
var h2 = null
var h3 = null

var oldtransformNodex = null
// var oldtransformNodeOther = null
// var oldMesh = null
var oldMeshOther = null

var drag = null
// var notmoveGroup = null
// var movedGroup = null

// var movesingle = false
// var dynamicTexture = null
// var dynamicTexture2 = null
// var show = 50
// var showdd = 50

var isRotating = true
var camera

BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
  if (document.getElementById('customLoadingScreenDiv')) {
    document.getElementById('customLoadingScreenDiv').style.display = 'initial'

    return
  }
  this._loadingDiv = document.createElement('div')
  // this._loadingDiv.style.height = '1750px';
  this._loadingDiv.id = 'customLoadingScreenDiv'

  thecss = 'lohingifpc'
  thecss2 = 'zcpc'

  this._loadingDiv.innerHTML = "<div class='oka'><div class='" + thecss + "'><image src='./logok.gif' class='jiazaiimg'/></div></div>"

  this._resizeLoadingUI()
  window.addEventListener('resize', this._resizeLoadingUI)
  document.body.appendChild(this._loadingDiv)
}

// var movebyName = function(nodeName) {
//   var x = scene.getTransformNodeByName(nodeName)
//   moveTrans(x)
// }

function prepareGroupButton2(transformNodex, color, qu) {
  var mesheses = null
  if (transformNodex.getClassName() === 'TransformNode') {
    mesheses = transformNodex.getChildMeshes(false)
  } else {
    mesheses = []
    mesheses.push(transformNodex)
  }

  for (var i = 0; i < mesheses.length; i++) {
    mesheses[i].actionManager = new BABYLON.ActionManager(scene)
    // var theScaling = mesheses[i].scaling
    /* if (true) {
              try {
                  mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x, theScaling.y, theScaling.z), 100));
                  mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x * 1.01, theScaling.y * 1.01, theScaling.z * 1.01), 100));

              } catch (error) {
                  //alert(error)
              }
          }*/

    // var clickbegin = false
    mesheses[i].actionManager.registerAction(
      new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnPointerOverTrigger,
        parameter: ''
      },
      function() {
        // clickbegin = true

        // if (true) {
        //   if (oldtransformNodeOther != null) {
        //     oldtransformNodeOther.removeBehavior(drag)
        //     var mesheses2 = null
        //     if (oldtransformNodeOther.getClassName() === 'TransformNode') {
        //       mesheses2 = oldtransformNodeOther.getChildMeshes(false)
        //     } else {
        //       mesheses2 = []
        //       mesheses2.push(oldtransformNodeOther)
        //     }
        //     for (var i = 0; i < mesheses2.length; i++) {
        //       try {
        //         h2.removeMesh(mesheses2[i])
        //       } catch (error) {
        //         // alert(error)
        //       }
        //     }
        //   }

        //   oldtransformNodeOther = transformNodex
        //   // transformNodex.addBehavior(drag);
        //   var mesheses3 = null
        //   if (transformNodex.getClassName() === 'TransformNode') {
        //     mesheses3 = transformNodex.getChildMeshes(false)
        //   } else {
        //     mesheses3 = []
        //     mesheses3.push(transformNodex)
        //   }
        //   for (var i = 0; i < mesheses3.length; i++) {
        //     try {
        //       h2.addMesh(mesheses3[i], color)
        //     } catch (error) {
        //       // alert(error)
        //     }
        //   }
        isRotating = false
        camera.useAutoRotationBehavior = isRotating
        // }
      }
      )
    )
    // 移出事件
    mesheses[i].actionManager.registerAction(
      new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnPointerOutTrigger,
        parameter: ''
      },
      function() {
        // clickbegin = true
        // if (true) {
        // var mesheses4 = null
        // if (transformNodex.getClassName() === 'Mesh') {
        //   mesheses4 = []
        //   mesheses4.push(transformNodex)
        // }
        // for (var i = 0; i < mesheses4.length; i++) {
        //   try {
        //     h2.removeMesh(mesheses4[i])
        //   } catch (error) {
        //     // alert(error)
        //   }
        // }
        // clickbegin = false
        isRotating = true
        camera.useAutoRotationBehavior = isRotating
        // }
      }
      )
    )
    mesheses[i].actionManager.registerAction(
      new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnPickTrigger,
        parameter: ''
      },
      function() {
        clickbegin = true

        // if (true) {
        try {
          cameraClick(transformNodex)
        } catch (error) {
          // alert(error)
        }
        // clickbegin = false
        // }
      })
    )
  }
}

BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
  show = 50
  document.getElementById('customLoadingScreenDiv').style.display = 'none'
  document.getElementById('customLoadingScreenDiv_first').style.display = 'none'
  document.title = '水泵房'

  // var prepareGroupButton = function(transformNodex, color, qu) {
  //   var mesheses = null
  //   if (transformNodex.getClassName() === 'TransformNode') {
  //     mesheses = transformNodex.getChildMeshes(false)
  //   } else {
  //     mesheses = []
  //     mesheses.push(transformNodex)
  //   }

  //   for (var i = 0; i < mesheses.length; i++) {
  //     mesheses[i].actionManager = new BABYLON.ActionManager(scene)
  //     // var theScaling = mesheses[i].scaling
  //     /* if (true) {
  //               try {
  //                   mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x, theScaling.y, theScaling.z), 100));
  //                   mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x * 1.01, theScaling.y * 1.01, theScaling.z * 1.01), 100));

  //               } catch (error) {
  //                   //alert(error)
  //               }
  //           }*/
  //     var clickbegin = false
  //     mesheses[i].actionManager.registerAction(
  //       new BABYLON.ExecuteCodeAction({
  //         trigger: BABYLON.ActionManager.OnPointerOverTrigger,
  //         parameter: ''
  //       },
  //       function() {
  //         clickbegin = true

  //         if (true) {
  //           if (oldtransformNodeOther != null) {
  //             oldtransformNodeOther.removeBehavior(drag)
  //             var mesheses2 = null
  //             if (oldtransformNodeOther.getClassName() == 'TransformNode') {
  //               mesheses2 = oldtransformNodeOther.getChildMeshes(false)
  //             } else {
  //               mesheses2 = []
  //               mesheses2.push(oldtransformNodeOther)
  //             }
  //             for (var i = 0; i < mesheses2.length; i++) {
  //               try {
  //                 h2.removeMesh(mesheses2[i])
  //               } catch (error) {
  //                 // alert(error)
  //               }
  //             }
  //           }

  //           oldtransformNodeOther = transformNodex

  //           // transformNodex.addBehavior(drag);

  //           var mesheses3 = null
  //           if (transformNodex.getClassName() === 'TransformNode') {
  //             mesheses3 = transformNodex.getChildMeshes(false)
  //           } else {
  //             mesheses3 = []
  //             mesheses3.push(transformNodex)
  //           }
  //           for (var i = 0; i < mesheses3.length; i++) {
  //             try {
  //               h2.addMesh(mesheses3[i], color)
  //             } catch (error) {
  //               // alert(error)
  //             }
  //           }
  //           clickbegin = false
  //         }
  //       }
  //       )
  //     )
  //     mesheses[i].actionManager.registerAction(
  //       new BABYLON.ExecuteCodeAction({
  //         trigger: BABYLON.ActionManager.OnPickTrigger,
  //         parameter: ''
  //       },
  //       function() {
  //         clickbegin = true
  //         if (true) {
  //           try {
  //             quClick(qu)
  //           } catch (error) {
  //             // alert(error)
  //           }
  //           clickbegin = false
  //         }
  //       }
  //       )
  //     )
  //   }
  // }

  var prepareGroupButton2ByMesh = function(transformNodex, color, qu) {
    var mesheses = null
    if (transformNodex.getClassName() === 'Mesh') {
      mesheses = []
      mesheses.push(transformNodex)
    }

    for (var i = 0; i < mesheses.length; i++) {
      mesheses[i].actionManager = new BABYLON.ActionManager(scene)
      // var theScaling = mesheses[i].scaling
      /* if (true) {
                  try {
                      mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x, theScaling.y, theScaling.z), 100));
                      mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x * 1.01, theScaling.y * 1.01, theScaling.z * 1.01), 100));

                  } catch (error) {
                      //alert(error)
                  }
              }*/

      // let clickbegin = false
      mesheses[i].actionManager.registerAction(
        new BABYLON.ExecuteCodeAction({
          trigger: BABYLON.ActionManager.OnPointerOverTrigger,
          parameter: ''
        },
        function() {
          // clickbegin = true
          // if (true) {
          if (oldMeshOther != null) {
            oldMeshOther.removeBehavior(drag)
            var mesheses2 = null
            if (oldMeshOther.getClassName() === 'Mesh') {
              mesheses2 = []
              mesheses2.push(oldMeshOther)
            }
            for (var i = 0; i < mesheses2.length; i++) {
              try {
                h2.removeMesh(mesheses2[i])
              } catch (error) {
                // alert(error)
              }
            }
          }

          oldMeshOther = transformNodex
          // transformNodex.addBehavior(drag);
          var mesheses3 = null
          if (transformNodex.getClassName() === 'Mesh') {
            mesheses3 = []
            mesheses3.push(transformNodex)
          }
          for (let i = 0; i < mesheses3.length; i++) {
            try {
              h2.addMesh(mesheses3[i], color)
            } catch (error) {
              // alert(error)
            }
          }
          // clickbegin = false
          isRotating = false
          camera.useAutoRotationBehavior = isRotating
          // }
        }
        )
      )
      // 移出事件
      mesheses[i].actionManager.registerAction(
        new BABYLON.ExecuteCodeAction({
          trigger: BABYLON.ActionManager.OnPointerOutTrigger,
          parameter: ''
        },
        function() {
          // clickbegin = true
          // if (true) {
          var mesheses4 = null
          if (transformNodex.getClassName() === 'Mesh') {
            mesheses4 = []
            mesheses4.push(transformNodex)
          }
          for (var i = 0; i < mesheses4.length; i++) {
            try {
              h2.removeMesh(mesheses4[i])
            } catch (error) {
              // alert(error)
            }
          }
          // clickbegin = false
          isRotating = true
          camera.useAutoRotationBehavior = isRotating
          // }
        }
        )
      )
      mesheses[i].actionManager.registerAction(
        new BABYLON.ExecuteCodeAction({
          trigger: BABYLON.ActionManager.OnPickTrigger,
          parameter: ''
        },
        function() {
          // clickbegin = true
          // if (true) {
          try {
            // quClick(transformNodex.name)
            cameraClick(transformNodex)
          } catch (error) {
            // alert(error)
          }
          // clickbegin = false
          // }
        }
        )
      )
    }
  }

  // 绑功能点
  // var cl = new BABYLON.Color3(0, 0, 1)
  // var c2 = new BABYLON.Color3(1, 0, 0)
  var smokeAlarms = []
  scene.transformNodes.forEach(function(node) {
    if (node.name.startsWith('smokealarm')) {
      smokeAlarms.push(node)
    }
  })
  var length = smokeAlarms.length
  console.log('以 smokealarm 开头的对象数量:', length)
  smokeAlarms.forEach(function(jk01, index) {
    console.log('smokeAlarms', jk01)
    var parts = jk01.name.split('smokealarm')
    if (parts.length > 1) {
      const paddedIndex = String(index + 1).padStart(3, '0')
      jk01.nameID = `S${paddedIndex}`
      // jk01.nameID = 'S' + parts[1]
    } else {
      jk01.nameID = 'S000'
    }
    jk01.baojing = false

    prepareGroupButton2(jk01)
  })
  // 存储所有 camera 相关的 Mesh
  const cameraMeshes = []
  scene.meshes.forEach(mesh => {
    if (mesh.name.startsWith('camera')) {
      cameraMeshes.push(mesh)
    }
  })
  const cameraCount = cameraMeshes.length
  console.log('以 camera 开头的 Mesh 数量:', cameraCount)
  // 定义颜色
  // const colorRed = new BABYLON.Color3(1, 0, 0) // 红
  const colorBlue = new BABYLON.Color3(0, 0, 1)
  cameraMeshes.forEach((cam, index) => {
    const paddedIndex = String(index + 1).padStart(3, '0')
    cam.nameID = `C${paddedIndex}`
    prepareGroupButton2ByMesh(cam, colorBlue, '摄像头1')
  })

  var light = new BABYLON.HemisphericLight('HemiLight', new BABYLON.Vector3(0, 1, 0), scene)
  light.intensity = 2
  light.diffuse = new BABYLON.Color3(0.92, 0.92, 0.92)

  // 给vue页面传值，加载完成之后
  parent.getIframeLoading('false')
}

BABYLON.DracoCompression.Configuration.decoder.wasmUrl = './js/draco_wasm_wrapper_gltf.js'
BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = './js/draco_decoder_gltf.wasm'
BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = './js/draco_decoder_gltf.js'

// createScene function that creates and return the scene
var createScene = function() {
  engine.displayLoadingUI()
  var scene = new BABYLON.Scene(engine)
  camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 5, new BABYLON.Vector3(0, -1, 0), scene)
  camera.setTarget(new BABYLON.Vector3(0, 0, 0))
  camera.attachControl(canvas, true)
  camera.lowerRadiusLimit = 5.0 // 这里是最大的位置，值越大，物体越小
  camera.upperRadiusLimit = 200
  camera.radius = 10 // 增加 radius 值，模型变小   减小 radius 值，模型变大
  camera.alpha = Math.PI * -218.4 / 180 // 改Y轴角度
  camera.beta = Math.PI * 40 / 180 // XZ 平面的倾斜角度
  camera.inertia = 0.1 // 缩放的快慢
  camera.useAutoRotationBehavior = isRotating // 自动旋转

  camera.panningDistanceLimit = 2 // 平移半径
  camera.panningInertia = 0
  camera.autoTransitionRange = 1
  camera.pinchToPanMaxDistance = 0.1
  camera.pinchDeltaPercentage = 0.001
  camera.useAutoRotationBehavior = true

  // 改变场景背景颜色 - 背景颜色opacity值设为0，达到透明背景的效果
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)

  scene.activeCamera = camera

  scene.activeCamera.useInputToRestoreState = true
  // var camera1_status = scene.activeCamera.storeState()

  var assetsManager = new BABYLON.AssetsManager(scene)
  var meshTask = assetsManager.addMeshTask('skull task', '', 'asset/', 'F5.glb')

  meshTask.onSuccess = function(task) {
    task.loadedMeshes[0].scaling = new BABYLON.Vector3(0.4, 0.4, 0.4)
    task.loadedMeshes[0].position = new BABYLON.Vector3(0, 0.35, 0)
  }
  meshTask.onError = function(task, message, exception) {
    console.log(message, exception)
  }

  var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData('textures/environmentSpecular.env', scene)

  scene.environmentTexture = hdrTexture

  var spriteManagerPlayer = new BABYLON.SpriteManager('playerManager', './img/bl9.png', 10, {
    width: 100,
    height: 100
  }, scene)
  // spriteManagerPlayer.renderingGroupId = 2;
  spriteManagerPlayer.isPickable = true

  scene.onPointerDown = function(evt) {
    var pickResult = scene.pickSprite(this.pointerX, this.pointerY)

    var pick = scene.pick(scene.pointerX, scene.pointerY)
    console.log('pick', pick.pickedPoint)
    if (pickResult.pickedSprite != null) {
      if (pickResult.hit) {
        alert(pickResult.pickedSprite.name)
      }
    }
  }

  // renderCanvas.style.backgroundImage = 'url("./textures/' + '4' + '.jpg")'
  // console.log("x2");
  assetsManager.load()

  drag = new BABYLON.PointerDragBehavior({
    dragPlaneNormal: new BABYLON.Vector3(0, 0, 1)
  })
  // drag.useObjectOrienationForDragging = false;

  drag.validateDrag = (targetPosition) => {
    // console.log(targetPosition)
    if (targetPosition.x > 10.5 || targetPosition.x < -10.5) {
      return false
    }
    if (targetPosition.z > 10.5 || targetPosition.z < -10.5) {
      return false
    }
    if (oldtransformNodex != null) {
      return true
    }
  }
  drag.onDragEndObservable.add((event) => {
    // console.log("dragEnd");
    // console.log(event);
    // console.log(line03_position)
  })
  // console.log("x3");
  // GUI
  h1 = new BABYLON.HighlightLayer('hl1', scene)
  h2 = new BABYLON.HighlightLayer('hl2', scene)
  h3 = new BABYLON.HighlightLayer('hl2', scene)
  var step = 0.1
  var currentx = 1

  // var step2 = 0.1
  // var currentx2 = 0.1
  h1.blurHorizontalSize = 0.1
  // var showx = 0
  // var showx2 = 2
  // console.log("x4");
  scene.registerAfterRender(() => {
    h1.blurHorizontalSize = h1.blurVerticalSize + currentx

    var nodealert = scene.getTransformNodeByName('yan')
    if (nodealert != null) {
      var mesheses3 = null
      if (nodealert.getClassName() === 'TransformNode') {
        mesheses3 = nodealert.getChildMeshes(false)
      } else {
        mesheses3 = []
        mesheses3.push(nodealert)
      }
      for (var i = 0; i < mesheses3.length; i++) {
        try {
          if (nodealert.baojing === true) {
            h3.addMesh(mesheses3[i], new BABYLON.Color3(1, 0, 0))
          } else {
            h3.removeMesh(mesheses3[i])
          }
        } catch (error) {
          // alert(error)
        }
      }
    }
  })

  if (currentx > 0.5) {
    step *= -1
  }
  if (currentx < 0) {
    step *= -1
  }
  currentx += step

  // console.log("here");
  return scene
}

var canvas = document.getElementById('renderCanvas')
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {
  stencil: true
})

// call the createScene function
var scene = createScene()
scene.autoClear = true
scene.imageProcessingConfiguration.exposure = 1
scene.imageProcessingConfiguration.contrast = 1
scene.environmentIntensity = 0.4
engine.runRenderLoop(function() {
  scene.render()
})

window.addEventListener('resize', function() {
  engine.resize()
})

// 功能：点区以后跳转到新页
// quName :转过来的区号
// function quClick(quName) {
//   if (quName === '现行w文件室内') {
//     window.location.href = 'http://ikki2000.gitee.io/101/webA/index.html'
//   }
//   if (quName === '待销文件室') {
//     window.location.href = 'http://ikki2000.gitee.io/101/webB/index.html'
//   }
// }

// 功能：点camera后事件
// function cameraClick(camera) {
//   alert(camera.nameID)
// }

// function HashMap() {
//   // 定义长度
//   var length = 0
//   // 创建一个对象
//   var obj = {}

//   // 判断Map是否为空
//   this.isEmpty = function() {
//     return length === 0
//   }

//   // 判断对象中是否包含给定Key
//   this.containsKey = function(key) {
//     return (key in obj)
//   }

//   // 判断对象中是否包含给定的Value
//   this.containsValue = function(value) {
//     for (var key in obj) {
//       if (obj[key] === value) {
//         return true
//       }
//     }
//     return false
//   }

// 向map中添加数据
//   this.put = function(key, value) {
//     if (!this.containsKey(key)) {
//       length++
//     }
//     obj[key] = value
//   }

//   // 根据给定的key获取Value
//   this.get = function(key) {
//     return this.containsKey(key) ? obj[key] : null
//   }

//   // 根据给定的Key删除一个值
//   this.remove = function(key) {
//     if (this.containsKey(key) && (delete obj[key])) {
//       length--
//     }
//   }

//   // 获得Map中所有的value
//   this.values = function() {
//     var _values = []
//     for (var key in obj) {
//       _values.push(obj[key])
//     }
//     return _values
//   }

//   // 获得Map中的所有key
//   this.keySet = function() {
//     var _keys = []
//     for (var key in obj) {
//       _keys.push(key)
//     }
//     return _keys
//   }

//   // 获得Map的长度
//   this.size = function() {
//     return length
//   }

//   // 清空Map
//   this.clear = function() {
//     length = 0
//     obj = {}
//   }
// }

// var yangans = new HashMap()
// yangans.put('CAM_000', 'yan')
// console.log("here2");
// yangans.put('DAK_MO_CAM_002', 'camera02');
// yangans.put('DAK_MO_CAM_003', 'camera03');
// yangans.put('DAK_MO_CAM_004', 'camera04');
// yangans.put('ZLS_MO_CAM_001', 'camera05');
// yangans.put('ZLS_MO_CAM_002', 'camera06');
// yangans.put('YLS_MO_CAM_001', 'camera07');
// yangans.put('YLS_MO_CAM_002', 'camera08');
// yangans.put('ZL_MO_CAM_001', 'camera09');

// 功能转入报警
// function Myalert(MathineID, baojingx) {
//   var theName = yangans.get(MathineID)

//   if (theName === 'yan') {
//     // console.log(scene);
//     xx = scene.getTransformNodeByName('yan').baojing = baojingx
//   }
// }
// scene.debugLayer.show();
// 报警  true:表示报警， false :表示不报警
// Myalert('CAM_000', true)
function cameraClick(TheCamera) {
  window.parent.postMessage(
    {
      data: TheCamera.nameID
    },
    '*'
  )
}

function handleAlarm(deviceId, isAlarm) {
  console.log('rrrrr')
  var cl = new BABYLON.Color3(0, 0, 1)
  var c2 = new BABYLON.Color3(1, 0, 0)
  const targetDevice = scene.transformNodes.find(node => node.nameID === deviceId)
  if (targetDevice) {
    targetDevice.baojing = isAlarm
    var mesheses = null
    if (targetDevice.getClassName() === 'TransformNode') {
      mesheses = targetDevice.getChildMeshes(false)
    } else {
      mesheses = []
      mesheses.push(targetDevice)
    }
    if (isAlarm) {
      console.log('111')
      for (var i = 0; i < mesheses.length; i++) {
        h2.addMesh(mesheses[i], c2)
      }
    } else {
      console.log('222')
      for (var j = 0; j < mesheses.length; j++) {
        h2.removeMesh(mesheses[j])
        h2.addMesh(mesheses[j], cl)
      }
    }
  } else {
    console.log(`未找到设备 ID 为 ${deviceId} 的设备`)
  }
}

// 监测父页面传来得初始化得温度湿度值
window.addEventListener(
  'message',
  function(e) {
    console.log('ddd', e.data.data)
    const deviceData = e.data.data
    if (Array.isArray(deviceData)) {
      deviceData.forEach(device => {
        handleAlarm(device.deviceId, device.isAlarm)
      })
    } else {
      handleAlarm(deviceData.deviceId, deviceData.isAlarm)
    }
  },
  false
)

window.handleAlarm = handleAlarm