import * as THREE from 'three'; import { animateCamera, getTextCanvas, renderVideo } from '/@/utils/threejs/util'; import UseThree from '../../../../utils/threejs/useThree'; import lmWindRect from './longmen.threejs'; import zdWindRect from './zhedie.threejs'; import dsWindRect from './duishe.threejs'; import lmWindRectSide from './longmenSide.threejs'; import { useAppStore } from '/@/store/modules/app'; import gsap from 'gsap'; // 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, // group, lmWindRectObj, zdWindRectObj, dsWindRectObj, lmWindRectSideObj, windRectType = 'lmWindRect'; const appStore = useAppStore(); // 初始化左右摇摆动画 const startAnimation = () => { // 定义鼠标点击事件 model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null)); model.canvasContainer?.addEventListener('pointerup', (event) => { event.stopPropagation(); // 单道、 双道 if (windRectType === 'lmWindRect') { lmWindRectObj.mouseUpModel.call(lmWindRectObj); } else if (windRectType === 'zdWindRect') { zdWindRectObj.mouseUpModel.call(zdWindRectObj); } else if (windRectType === 'dsWindRect') { dsWindRectObj.mouseUpModel.call(dsWindRectObj); } else if (windRectType === 'lmWindSide') { lmWindRectSideObj.mouseUpModel.call(lmWindRectSideObj); } }); }; // 鼠标点击、松开事件 const mouseEvent = (event) => { event.stopPropagation(); const widthScale = appStore.getWidthScale; const heightScale = appStore.getHeightScale; // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1) model.mouse.x = ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1; model.mouse.y = -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1; (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera); if (group) { const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[]; if (intersects.length > 0) { // 单道、 双道 if (windRectType === 'lmWindRect') { lmWindRectObj.mousedownModel.call(lmWindRectObj, intersects); } else if (windRectType === 'zdWindRect') { zdWindRectObj.mousedownModel.call(zdWindRectObj, intersects); } else if (windRectType === 'dsWindRect') { dsWindRectObj.mousedownModel.call(dsWindRectObj, intersects); } else if (windRectType === 'lmWindSide') { lmWindRectSideObj.mousedownModel.call(lmWindRectSideObj, intersects); } } } }; /* 添加监控数据 */ export const addFmText = (selectData) => { if (windRectType === 'lmWindRect') { return lmWindRectObj.addFmText.call(lmWindRectObj, selectData); } else if (windRectType === 'zdWindRect') { return zdWindRectObj.addFmText.call(zdWindRectObj, selectData); } else if (windRectType === 'dsWindRect') { return dsWindRectObj.addFmText.call(dsWindRectObj, selectData); } else if (windRectType === 'lmWindSide') { lmWindRectSideObj.addFmText.call(lmWindRectSideObj, selectData); } }; export const play = (flag, isDirect = false) => { if (windRectType === 'lmWindRect') { return lmWindRectObj.play.call(lmWindRectObj, flag, isDirect); } else if (windRectType === 'zdWindRect') { return zdWindRectObj.play.call(zdWindRectObj, flag, isDirect); } else if (windRectType === 'dsWindRect') { return dsWindRectObj.play.call(dsWindRectObj, flag, isDirect); } else if (windRectType === 'lmWindSide') { lmWindRectSideObj.play.call(lmWindRectSideObj, flag, isDirect); } }; export const playCamera = (flag) => { if (windRectType === 'lmWindSide') { lmWindRectSideObj.playCamera.call(lmWindRectSideObj, flag); } }; // 切换风窗类型 export const setModelType = (type) => { windRectType = type; model.camera.position.set(-1000, 100, 500); // 暂停龙门动画 const lmGsap = gsap.getById('lm') || null; if (lmGsap != null) { lmGsap.pause(); lmGsap.kill(); } lmWindRectObj.deviceRunState = ''; dsWindRectObj.isRun = false; lmWindRectSideObj.deviceRunState = ''; lmWindRectSideObj.tanTouRunState = ''; return new Promise((resolve) => { // 显示双道风窗 if (windRectType === 'lmWindRect') { model.startAnimation = lmWindRectObj.render.bind(lmWindRectObj); group = lmWindRectObj.group; const cfTanTou = lmWindRectObj.group?.getObjectByName('lmTanTou') as THREE.Group; cfTanTou.position.setY(0); if (model.scene.getObjectByName('zdcf')) { model.scene.remove(zdWindRectObj.group); } if (model.scene.getObjectByName('dscf')) { model.scene.remove(dsWindRectObj.group); } if (model.scene.getObjectByName('lmcfSide')) { model.scene.remove(lmWindRectSideObj.group); } const oldCameraPosition = { x: -1000, y: 100, z: 500 }; model.scene.add(lmWindRectObj.group); setTimeout(async () => { resolve(null); const position = lmWindRectObj.group.position; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 94.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } else if (windRectType === 'zdWindRect') { // 停用混合器上所有预定的动作 zdWindRectObj.animationAction.time = 0; model.startAnimation = zdWindRectObj.render.bind(zdWindRectObj); group = zdWindRectObj.group; if (model.scene.getObjectByName('lmcf')) { model.scene.remove(lmWindRectObj.group); } if (model.scene.getObjectByName('dscf')) { model.scene.remove(dsWindRectObj.group); } if (model.scene.getObjectByName('lmcfSide')) { model.scene.remove(lmWindRectSideObj.group); } model.scene.add(zdWindRectObj.group); const oldCameraPosition = { x: -1000, y: 100, z: 500 }; setTimeout(async () => { resolve(null); const position = zdWindRectObj.group.position; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 66.257, y: 57.539, z: 104.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } else if (windRectType === 'dsWindRect') { // dsWindRectObj.isRun = false; model.startAnimation = dsWindRectObj.render.bind(dsWindRectObj); group = dsWindRectObj.group; const dsTanTou = dsWindRectObj.group?.getObjectByName('dsTanTou') as THREE.Group; dsTanTou.position.setY(0); if (model.scene.getObjectByName('lmcf')) { model.scene.remove(lmWindRectObj.group); } if (model.scene.getObjectByName('zdcf')) { model.scene.remove(zdWindRectObj.group); } if (model.scene.getObjectByName('lmcfSide')) { model.scene.remove(lmWindRectSideObj.group); } model.scene.add(dsWindRectObj.group); setTimeout(async () => { resolve(null); const position = dsWindRectObj.group.position; const oldCameraPosition = { x: -1020, y: 100, z: 500 }; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 104.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } else if (windRectType === 'lmWindSide') { model.startAnimation = lmWindRectSideObj.render.bind(lmWindRectSideObj); group = lmWindRectSideObj.group; const cfTanTou = lmWindRectSideObj.group?.getObjectByName('probe_bar') as THREE.Group; cfTanTou.position.setY(0.377); if (model.scene.getObjectByName('lmcf')) { model.scene.remove(lmWindRectObj.group); } if (model.scene.getObjectByName('zdcf')) { model.scene.remove(zdWindRectObj.group); } if (model.scene.getObjectByName('dscf')) { model.scene.remove(dsWindRectObj.group); } const oldCameraPosition = { x: -1000, y: 100, z: 500 }; model.scene.add(lmWindRectSideObj.group); setTimeout(async () => { resolve(null); const position = lmWindRectSideObj.group.position; // const position = new THREE.Vector3(0, 0, 0) await animateCamera( oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 94.313 }, // { x: 1, y: 2, z: 4 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); // lmWindRectSideObj.playCamera(true); }, 300); } }); }; export const mountedThree = (playerVal1, playerVal2) => { return new Promise(async (resolve) => { model = new UseThree('#window3D'); model.setEnvMap('test1'); model.renderer.toneMappingExposure = 1; lmWindRectObj = new lmWindRect(model, playerVal1, playerVal2); await lmWindRectObj.mountedThree(); zdWindRectObj = new zdWindRect(model, playerVal1); await zdWindRectObj.mountedThree(); dsWindRectObj = new dsWindRect(model, playerVal1); await dsWindRectObj.mountedThree(); lmWindRectSideObj = new lmWindRectSide(model, playerVal1, playerVal2); await lmWindRectSideObj.mountedThree(); resolve(null); model.animate(); startAnimation(); }); }; export const destroy = () => { if (model) { lmWindRectObj?.destroy(); zdWindRectObj?.destroy(); zdWindRectObj?.destroy(); lmWindRectSideObj?.destroy(); model.deleteModal(); model = null; group = null; } };