// 从这里开始 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.id = 'customLoadingScreenDiv' thecss = 'lohingifpc' thecss2 = 'zcpc' this._loadingDiv.innerHTML = "
" this._resizeLoadingUI() window.addEventListener('resize', this._resizeLoadingUI) document.body.appendChild(this._loadingDiv) } 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 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) { var parts = jk01.name.split('.') if (parts.length > 1) { jk01.nameID = 'S' + parts[1] } else { jk01.nameID = 'S000' } jk01.baojing = false // 假设初始不报警,可根据实际情况修改 prepareGroupButton2(jk01, cl) }) // 存储所有 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' var createScene = function() { engine.displayLoadingUI() var scene = new BABYLON.Scene(engine) camera = new BABYLON.ArcRotateCamera( 'Camera', 0, 0, 60, // alpha=0(水平角度),beta=90°(垂直俯视),radius=200(距离) new BABYLON.Vector3(0, 0, 0), // 相机位置会根据 alpha/beta/radius 自动计算,无需手动设置 scene ) camera.setTarget(new BABYLON.Vector3(0, 0, 0)) // 瞄准原点 camera.attachControl(canvas, true) // 其他参数(保持不变或按需调整) camera.lowerRadiusLimit = 50 // 最小距离(可近看) camera.upperRadiusLimit = 500 // 最大距离(可远观) camera.inertia = 0.1 // 操作惯性 camera.useAutoRotationBehavior = true // 开启自动旋转(可选) 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")' 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) { console.log('error') } } } }) if (currentx > 0.5) { step *= -1 } if (currentx < 0) { step *= -1 } currentx += step 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.8 engine.runRenderLoop(function() { scene.render() }) window.addEventListener('resize', function() { engine.resize() }) function cameraClick(TheCamera) { window.parent.postMessage( { data: TheCamera.nameID }, '*' ) } function handleAlarm(deviceId, isAlarm) { 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