You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
627 lines
18 KiB
627 lines
18 KiB
// 从这里开始
|
|
var h1 = null
|
|
var h2 = null
|
|
var h3 = null
|
|
|
|
var oldtransformNodex = null
|
|
var oldMeshOther = null
|
|
|
|
var drag = null
|
|
var isRotating = true
|
|
var clickParentRotate = false
|
|
|
|
var targetAngles = {
|
|
default: { // 初始视角
|
|
alpha: 2.5809,
|
|
beta: 0.9804,
|
|
radius: 3
|
|
},
|
|
alarm: { // 报警视角（示例）
|
|
alpha: 3.1213, // -π（180度）
|
|
beta: 0.5855, // π/4（45度）
|
|
radius: 3 // 更近的距离
|
|
}
|
|
}
|
|
|
|
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 = "<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)
|
|
}
|
|
|
|
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)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOverTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
isRotating = false
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
)
|
|
)
|
|
// 移出事件
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOutTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
if (clickParentRotate) {
|
|
isRotating = true
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
}
|
|
)
|
|
)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPickTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
clickbegin = true
|
|
try {
|
|
cameraClick(transformNodex)
|
|
} catch (error) {
|
|
}
|
|
})
|
|
)
|
|
}
|
|
}
|
|
|
|
function prepareGroupButton3(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)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOverTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
isRotating = false
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
)
|
|
)
|
|
// 移出事件
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOutTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
if (clickParentRotate) {
|
|
isRotating = true
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
}
|
|
)
|
|
)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPickTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
clickbegin = true
|
|
try {
|
|
archCabinetsClick(transformNodex)
|
|
} catch (error) {
|
|
}
|
|
})
|
|
)
|
|
}
|
|
}
|
|
|
|
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)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOverTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
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) {
|
|
}
|
|
}
|
|
}
|
|
|
|
oldMeshOther = transformNodex
|
|
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) {
|
|
}
|
|
}
|
|
isRotating = false
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
)
|
|
)
|
|
// 移出事件
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPointerOutTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
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) {
|
|
}
|
|
}
|
|
if (clickParentRotate) {
|
|
isRotating = true
|
|
camera.useAutoRotationBehavior = isRotating
|
|
}
|
|
}
|
|
)
|
|
)
|
|
mesheses[i].actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction({
|
|
trigger: BABYLON.ActionManager.OnPickTrigger,
|
|
parameter: ''
|
|
},
|
|
function() {
|
|
try {
|
|
cameraClick(transformNodex)
|
|
} catch (error) {
|
|
}
|
|
}
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
// 绑功能点
|
|
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}`
|
|
} else {
|
|
jk01.nameID = 'S000'
|
|
}
|
|
jk01.baojing = false
|
|
|
|
prepareGroupButton2(jk01)
|
|
})
|
|
// 存储所有 camera 相关的 Mesh 监控
|
|
const cameraMeshes = []
|
|
scene.transformNodes.forEach(function(node) {
|
|
if (node.name.startsWith('有害生物去除器')) {
|
|
cameraMeshes.push(node)
|
|
}
|
|
})
|
|
const cameraCount = cameraMeshes.length
|
|
console.log('以 camera 开头的 Mesh 数量:', cameraCount)
|
|
const colorBlue = new BABYLON.Color3(0, 0, 1)
|
|
cameraMeshes.forEach((cam, index) => {
|
|
const paddedIndex = String(index + 1).padStart(3, '0')
|
|
// DAK_MO_CAM_001
|
|
// cam.nameID = `DAK_MO_CAM_${paddedIndex}`
|
|
cam.nameID = `cam_${paddedIndex}`
|
|
prepareGroupButton2(cam)
|
|
})
|
|
|
|
// 档案柜
|
|
const archivesCabinets = [];
|
|
scene.transformNodes.forEach(function(node) {
|
|
if (node.name.startsWith('档案柜')) {
|
|
archivesCabinets.push(node);
|
|
}
|
|
});
|
|
const archivesCabinetsCount = archivesCabinets.length;
|
|
console.log('以 档案柜 数量:', archivesCabinetsCount);
|
|
|
|
if (archivesCabinets.length > 0) { // 增加安全判断，避免数组为空时报错
|
|
const children = archivesCabinets[0]._children;
|
|
const filteredChildren = children.filter(cam => cam.name !== "克隆_1");
|
|
|
|
for (let i = filteredChildren.length - 1; i >= 0; i--) {
|
|
const cam = filteredChildren[i];
|
|
const paddedIndex = String(filteredChildren.length - i);
|
|
cam.nameID = `cabinet-${paddedIndex}`;
|
|
prepareGroupButton3(cam);
|
|
}
|
|
}
|
|
|
|
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', 4.02, 0.98, 2.6,
|
|
new BABYLON.Vector3(1.2, 0.08, 0.03),
|
|
scene
|
|
)
|
|
camera.setTarget(new BABYLON.Vector3(0, 0, 0)) // 瞄准原点
|
|
camera.attachControl(canvas, true)
|
|
|
|
// ========== 关键修改：解决裁剪问题 ==========
|
|
camera.lowerRadiusLimit = 0.1 // 减小最小距离限制，允许相机更靠近物体
|
|
camera.upperRadiusLimit = 500 // 增大最大距离限制
|
|
camera.inertia = 0.1
|
|
|
|
// 设置裁剪平面（核心解决裁剪问题）
|
|
camera.minZ = 0.01 // 近裁剪平面：设置为较小值，避免近距离裁剪
|
|
camera.maxZ = 1000 // 远裁剪平面：设置为较大值，避免远距离裁剪
|
|
|
|
// 优化相机视场角（可选，根据需求调整）
|
|
camera.fov = 0.8 // 增大视场角，看到更多内容（默认约0.87弧度=50度）
|
|
|
|
camera.useAutoRotationBehavior = isRotating // 自动旋转
|
|
|
|
// 改变场景背景颜色 - 背景颜色opacity值设为0，达到透明背景的效果
|
|
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
|
|
scene.activeCamera = camera
|
|
|
|
scene.activeCamera.useInputToRestoreState = true
|
|
|
|
var assetsManager = new BABYLON.AssetsManager(scene)
|
|
|
|
// 加载GLB模型并处理材质
|
|
BABYLON.SceneLoader.LoadAssetContainerAsync('asset/', 'F5.glb', scene).then((container) => {
|
|
// 遍历所有材质
|
|
container.materials.forEach(material => {
|
|
// 可以保留材质处理逻辑
|
|
})
|
|
// 将加载的资产添加到场景中
|
|
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.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)
|
|
}
|
|
}
|
|
}
|
|
|
|
assetsManager.load()
|
|
|
|
drag = new BABYLON.PointerDragBehavior({
|
|
dragPlaneNormal: new BABYLON.Vector3(0, 0, 1)
|
|
})
|
|
|
|
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");
|
|
})
|
|
// GUI
|
|
h1 = new BABYLON.HighlightLayer('hl1', scene)
|
|
h2 = new BABYLON.HighlightLayer('hl2', scene)
|
|
h3 = new BABYLON.HighlightLayer('hl3', scene) // 修复重复的ID问题
|
|
var step = 0.1
|
|
var currentx = 1
|
|
|
|
h1.blurHorizontalSize = 0.1
|
|
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) {
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
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.4
|
|
engine.runRenderLoop(function() {
|
|
scene.render()
|
|
})
|
|
|
|
window.addEventListener('resize', function() {
|
|
engine.resize()
|
|
})
|
|
|
|
// 报警 true:表示报警， false :表示不报警
|
|
function cameraClick(TheCamera) {
|
|
window.parent.postMessage(
|
|
{
|
|
type: 'cameraClick',
|
|
data: TheCamera.nameID
|
|
},
|
|
'*'
|
|
)
|
|
}
|
|
|
|
// 报警 true:表示报警， false :表示不报警
|
|
function archCabinetsClick(TheCamera) {
|
|
window.parent.postMessage(
|
|
{
|
|
type: 'archCabinetsClick',
|
|
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)
|
|
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 }, '*')
|
|
})
|
|
}
|