// 从这里开始 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 = "
" 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