import * as THREE from 'three'; import UseThree from '../../../../utils/threejs/useThree'; import gasPumpBase from './gasPump.threejs.over'; import gasPumpUnder from './gasPump.threejs.under'; import { animateCamera, setModalCenter } from '/@/utils/threejs/util'; import useEvent from '../../../../utils/threejs/useEvent'; // 模型对象、 文字对象 let model: UseThree | undefined, gasPumpBaseObj: gasPumpBase | undefined, gasPumpUnderObj: gasPumpUnder | undefined, group: THREE.Object3D | undefined, gasPumpType = 'gasPump'; const { mouseDownFn } = useEvent(); // 鼠标点击事件 const mouseEvent = (event) => { if (event.button == 0) { mouseDownFn(model, group, event, (intersects) => { if (gasPumpType === 'gasPump') { // gasPumpBaseObj.mousedownModel.call(gasPumpBaseObj, intersects); } }); } }; const addMouseEvent = () => { // 定义鼠标点击事件 model?.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null)); }; export const playAnimate = (monitorData: any) => { if (gasPumpType === 'gasPumpUnder') { gasPumpUnderObj?.handleAnimation(monitorData); } }; export const addgasPumpText = (selectData) => { if (gasPumpType === 'gasPump') { // return gasPumpBaseObj.addgasPumpText.call(gasPumpBaseObj, selectData); } }; // 切换模型类型 export const setModelType = (type) => { gasPumpType = type; return new Promise((resolve) => { if (gasPumpType === 'gasPump' && gasPumpBaseObj && gasPumpBaseObj.group) { if (model?.scene?.getObjectByName('gasPumpUnder') && gasPumpUnderObj && gasPumpUnderObj.group) { model.scene.remove(gasPumpUnderObj.group); } group = gasPumpBaseObj.group; // model.isRender = false; const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 }; setTimeout(async () => { model?.scene?.add(group); await animateCamera( oldCameraPosition, { x: 0.544, y: 0.3335, z: 0.29222 }, { x: 0.0553, y: 1.2775, z: 3.7402 }, { x: 0.0731, y: -0.162, z: 0.562 }, model, 0.6 ); }, 300); resolve(null); } if (gasPumpType === 'gasPumpUnder' && gasPumpUnderObj && gasPumpUnderObj.group) { if (model?.scene?.getObjectByName('gasPump') && gasPumpBaseObj && gasPumpBaseObj.group) { model.scene.remove(gasPumpBaseObj.group); } gasPumpUnderObj.addCssText(); group = gasPumpUnderObj.group; // model.isRender = true; const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 }; setTimeout(async () => { model?.scene?.add(group); await animateCamera( oldCameraPosition, { x: 0.544, y: 0.3335, z: 0.29222 }, { x: -11.014079961863667, y: 1.6456786378357198, z: 5.733554317319543 }, { x: -7.043053237796046, y: 0.3354979232986092, z: -0.10561004136342216 }, model, 0.6 ); }, 300); resolve(null); } }); }; export const mountedThree = () => { return new Promise(async (resolve) => { model = new UseThree('#gasPump3D', '#gas3DCSS'); model.setEnvMap('test2'); model.renderer.toneMappingExposure = 1.0; // model.renderer.outputEncoding = THREE.sRGBEncoding; gasPumpBaseObj = new gasPumpBase(model); await gasPumpBaseObj.mountedThree(); gasPumpUnderObj = new gasPumpUnder(model); await gasPumpUnderObj.mountedThree(); addMouseEvent(); model.animate(); resolve(null); }); }; export const destroy = () => { if (model) { model.isRender = false; console.log('场景销毁前信息----------->', model.renderer?.info); gasPumpBaseObj?.destroy(); gasPumpBaseObj = undefined; group = undefined; model.destroy(); model = undefined; } };