import * as THREE from 'three'; import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util'; import UseThree from '../../../../utils/threejs/useThree'; import NitrogenOverground from './nitrogen.dishang.threejs'; import NitrogenUnderground from './nitrogen.dixia.threejs'; import NitrogenFlex from './nitrogen.flex.threejs'; import useEvent from '../../../../utils/threejs/useEvent'; // import * as dat from 'dat.gui'; // const gui = new dat.GUI(); // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999'; // 模型对象、 文字对象 let model: UseThree | undefined, // group: THREE.Object3D | undefined, nitrogenObj: NitrogenOverground | undefined, nitrogenUndergroundObj: NitrogenUnderground | undefined, nitrogenFlexObj: NitrogenFlex | undefined, modalType = 'nitrogen'; const { mouseDownFn } = useEvent(); // 鼠标点击、松开事件 const mouseEvent = (event) => { if (event.button == 0) { mouseDownFn(model as UseThree, group as THREE.Object3D, event, (intersects) => { if (modalType === 'nitrogen') { nitrogenObj?.mousedownModel.call(nitrogenObj, intersects); } console.log('摄像头控制信息', model?.orbitControls, model?.camera); }); } }; /* 添加监控数据 */ export const attachMonitorCards = () => { nitrogenUndergroundObj?.addCssText?.call(nitrogenUndergroundObj); }; export const addText = () => { if (modalType === 'nitrogen') { return nitrogenObj?.addCssText?.call(nitrogenObj); } }; export const play = () => { if (modalType === 'nitrogen') { return nitrogenObj?.play.call(nitrogenObj); } }; // 切换风窗类型 export const setModelType = (type, nitrogenNum?) => { modalType = type; model?.camera?.position.set(-1000, 100, 500); return new Promise((resolve) => { // 地上模型、地下模型切换 if (modalType === 'nitrogen' && nitrogenObj && nitrogenObj.group) { if (model?.scene?.getObjectByName('nitrogenUnderground') && nitrogenUndergroundObj && nitrogenUndergroundObj.group) { model.scene.remove(nitrogenUndergroundObj.group); nitrogenUndergroundObj.clearCssText(); } if (nitrogenNum) { nitrogenObj.nitrogenNum = nitrogenNum; const flag = nitrogenNum % 2 == 0 ? 0 : 1; const currentNitrogenNum = nitrogenObj.group.children.length - 2; // 判断地上注氮机的机数 if (currentNitrogenNum < nitrogenNum) { for (let i = 0; i < nitrogenNum; i++) { let nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D; if (!nitrogenModal) { nitrogenModal = nitrogenObj.nitrogenGroup[i]; nitrogenObj.group.add(nitrogenModal); } const c = Math.floor(nitrogenNum / 2); if (flag) { nitrogenModal.position.set(0, 0, 1.355 * (c - i)); } else { nitrogenModal.position.set(0, 0, (c - i - 0.5) * 1.355); } } } else if (currentNitrogenNum > nitrogenNum) { for (let i = nitrogenNum - 1; i < nitrogenNum; i++) { const nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D; nitrogenObj.group.remove(nitrogenModal); } } else { } setModalCenter(nitrogenObj.group); nitrogenObj.addCssText(); nitrogenObj.setModalPosition(); } group = nitrogenObj.group; const oldCameraPosition = { x: -1000, y: 100, z: 500 }; const oldControlsPosition = { x: -10, y: 10, z: 10 }; model?.scene?.add(nitrogenObj.group); let newCameraPosition = { x: 0, y: 0, z: 0 }, newControlsPosition = { x: 0, y: 0, z: 0 }; debugger; if (group.children.length == 5) { newCameraPosition = { x: 3.4434042980363104, y: 34.06459454762187, z: 106.31900957493957 }; newControlsPosition = { x: 3.060603700582905, y: -10.818677071155214, z: 6.036159227572685 }; } else if (group.children.length == 4) { newCameraPosition = { x: 3.90030651836962, y: 38.026892031369755, z: 87.12943006242206 }; newControlsPosition = { x: 3.584174940307743, y: -6.858117412269035, z: 4.311833565101436 }; } else if (group.children.length == 3) { newCameraPosition = { x: 4.033864762820565, y: 46.68282110004381, z: 82.43762902763777 }; newControlsPosition = { x: 3.7177327628205648, y: 1.7978121000437965, z: -0.37996697236224625 }; } else if (group.children.length == 6) { newCameraPosition = { x: -112.9018092843876, y: 27.56046920110982, z: 1.512031119343565 }; newControlsPosition = { x: -3.4116337023356875, y: -25.657219350386075, z: 1.0940848922982402 }; } setTimeout(async () => { model?.scene?.add(group); resolve(null); await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8); }, 300); } else if (modalType === 'nitrogenUnderground' && nitrogenUndergroundObj && nitrogenUndergroundObj.group) { if (model?.scene?.getObjectByName('nitrogen') && nitrogenObj && nitrogenObj.group) { model.scene.remove(nitrogenObj.group); nitrogenObj.clearCssText(); } nitrogenUndergroundObj.nitrogenNum = nitrogenNum; group = nitrogenUndergroundObj.group; nitrogenUndergroundObj.addCssText(); const oldCameraPosition = { x: -1000, y: 100, z: 500 }; const oldControlsPosition = { x: -10, y: 10, z: 10 }; const fitted = nitrogenUndergroundObj.getCameraConfig?.(); const newCameraPosition = fitted?.camera || { x: 21.7662617168586, y: 65.76772405405443, z: 106.19314654690366 }, newControlsPosition = fitted?.target || { x: -13.223797639205223, y: 13.119121404116392, z: 0.7650646324543227 }; setTimeout(async () => { model?.scene?.add(group); resolve(null); await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8); }, 300); } else if (modalType === 'nitrogenFlex' && nitrogenFlexObj && nitrogenFlexObj.group) { // 地下管路模型(基底 + 注氮机),与地上模型、地下管网模型三者共存,互不影响 if (model?.scene?.getObjectByName('nitrogen') && nitrogenObj && nitrogenObj.group) { model.scene.remove(nitrogenObj.group); nitrogenObj.clearCssText(); } if (model?.scene?.getObjectByName('nitrogenUnderground') && nitrogenUndergroundObj && nitrogenUndergroundObj.group) { model.scene.remove(nitrogenUndergroundObj.group); nitrogenUndergroundObj.clearCssText(); } // 机数由后端决定(1~3 台),动态增减 nitrogenFlexObj.setUnitCount(nitrogenNum ?? 3); group = nitrogenFlexObj.group; const oldCameraPosition = { x: -1000, y: 100, z: 500 }; const oldControlsPosition = { x: -10, y: 10, z: 10 }; const { camera, target } = nitrogenFlexObj.getCameraConfig(); setTimeout(async () => { model?.scene?.add(group as THREE.Object3D); resolve(null); await animateCamera(oldCameraPosition, oldControlsPosition, camera, target, model, 0.8); }, 300); } }); }; /** * @param undergroundModelName 地下三维模型名称,默认 nitrogenUnderground */ export const mountedThree = (undergroundModelName = 'nitrogenUnderground') => { return new Promise(async (resolve) => { model = new UseThree('#nitrogen3D', '#nitrogenCss3D'); model.setEnvMap('test1.hdr'); model.renderer.toneMappingExposure = 1.0; model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null)); nitrogenObj = new NitrogenOverground(model); await nitrogenObj.mountedThree(4); nitrogenUndergroundObj = new NitrogenUnderground(model, undergroundModelName); await nitrogenUndergroundObj.mountedThree(); // 先展示地下主模型,避免柔性模型资源缺失/缓存异常阻塞整个监控界面 setModelType('nitrogenUnderground'); resolve(null); model.animate(); // 地下管路模型(基底 + 注氮机)按需后台加载,失败不影响主界面 nitrogenFlexObj = new NitrogenFlex(model); nitrogenFlexObj.mountedThree().catch((error) => { console.warn('[nitrogen] 柔性模型加载失败,已跳过', error); }); }); }; export const destroy = () => { if (model) { model.isRender = false; console.log('场景销毁前信息----------->', model.renderer?.info); nitrogenObj?.destroy(); nitrogenObj = undefined; nitrogenUndergroundObj?.destroy(); nitrogenUndergroundObj = undefined; nitrogenFlexObj?.destroy(); nitrogenFlexObj = undefined; group = undefined; model.destroy(); model = undefined; } };