// 从这里开始 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 clickParentRotate = false var targetAngles = { default: { // 初始视角 alpha: 0, beta: 0, radius: 125 }, alarm: { // 报警视角(示例) alpha: 4.7190, // -π(180度) beta: 0.0100, // π/4(45度) radius: 136.5303 // 更近的距离 } } 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 if (clickParentRotate) { 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 = '5综3楼' 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 if (clickParentRotate) { 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 // 假设初始不报警,可根据实际情况修改 // var mesheses = null // if (jk01.getClassName() === 'TransformNode') { // mesheses = jk01.getChildMeshes(false) // } else { // mesheses = [] // mesheses.push(jk01) // } // for (var i = 0; i < mesheses.length; i++) { // h2.addMesh(mesheses[i], colorToUse) // } 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, 120, // 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 = 10 // 最小距离(可近看) camera.upperRadiusLimit = 1000 // 最大距离(可远观) 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) // } // 加载GLB模型并处理材质 BABYLON.SceneLoader.LoadAssetContainerAsync('asset/', 'F5.glb', scene).then((container) => { // 遍历所有材质 container.materials.forEach(material => { // 处理标准材质 if (material instanceof BABYLON.StandardMaterial) { material.backFaceCulling = true // 启用背面剔除 } // 处理PBR材质 // if (material instanceof BABYLON.PBRMaterial) { // material.backFaceCulling = true // 启用背面剔除 // } }) // 将加载的资产添加到场景中 container.addAllToScene() setTimeout(() => { moveCameraTo('alarm') }, 3000) }).catch((error) => { console.error('加载模型时出错:', error) }) 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) => { 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) }) // 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( { type: 'cameraClick', 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) { if (e.data.type === 'deviceState') { 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) } } else if (e.data.type === 'isGetRotate') { const isGetRotate = e.data.value console.log('isGetRotate:', isGetRotate) // 这里可以添加处理 isGetRotate 的逻辑 toggleAutoRotation(isGetRotate) } }, false ) function toggleAutoRotation(isAutoRotating) { var camera = scene.activeCamera clickParentRotate = !isAutoRotating if (!isAutoRotating) { // 启用自动旋转 camera.useAutoRotationBehavior = true } else { // 禁用自动旋转 camera.useAutoRotationBehavior = false camera.angularSpeed = 0 // 停止旋转 } } // 相机运动到指定视角(带动画) function moveCameraTo(targetPreset) { // 获取目标参数 var target = targetAngles[targetPreset] if (!target) return console.error('无效的视角预设') var camera = scene.activeCamera // 禁用用户交互(可选) camera.panningInertia = 0 // 禁止平移 // 创建并设置动画 var animationAlpha = new BABYLON.Animation( 'cameraAlphaAnimation', 'alpha', 60, // 帧率 BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) var animationBeta = new BABYLON.Animation( 'cameraBetaAnimation', 'beta', 60, // 帧率 BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) var animationRadius = new BABYLON.Animation( 'cameraRadiusAnimation', 'radius', 60, // 帧率 BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) // 定义关键帧 var keysAlpha = [ { frame: 0, value: camera.alpha }, { frame: 120, value: target.alpha } ] var keysBeta = [ { frame: 0, value: camera.beta }, { frame: 120, value: target.beta } ] var keysRadius = [ { frame: 0, value: camera.radius }, { frame: 120, value: target.radius } ] animationAlpha.setKeys(keysAlpha) animationBeta.setKeys(keysBeta) animationRadius.setKeys(keysRadius) // 设置缓动函数 var easingFunction = new BABYLON.CubicEase() easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT) animationAlpha.setEasingFunction(easingFunction) animationBeta.setEasingFunction(easingFunction) animationRadius.setEasingFunction(easingFunction) // 开始动画 scene.beginDirectAnimation(camera, [animationAlpha, animationBeta, animationRadius], 0, 120, false, 1, function() { // 动画完成后恢复用户交互 camera.panningInertia = 0.1 toggleAutoRotation(true) window.parent.postMessage({ type: 'autoRotationStatus', value: true }, '*') }) }