import * as THREE from 'three'; import UseThree from '../../../../utils/threejs/useThree'; import WorkFace from './workFace.threejs.base'; import { animateCamera } from '/@/utils/threejs/util'; import useEvent from '../../../../utils/threejs/useEvent'; // 模型对象、 文字对象 let model, workFaceObj: WorkFace | undefined, group, fiberType = 'workFace'; // workerFaceFiber const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent(); // 鼠标点击、松开事件 const mouseEvent = (event) => { if (event.button == 0 && group) { model.canvasContainer?.addEventListener('mousemove', mousemove); const groud = group.getObjectByName('groud'); const intakewind = group.getObjectByName('intakewind01'); const returnwind = group.getObjectByName('returnwind'); mouseDownFn(model, [groud, intakewind, returnwind], event); console.log('摄像头控制信息', model.orbitControls, model.camera); } }; const mouseUp = () => { if (!model) return; model.canvasContainer?.removeEventListener('mousemove', mousemove); mouseUpFn(model, 0.2); workFaceObj?.mouseUpModel.call(workFaceObj); }; const mousemove = () => { mousemoveFn(); }; const addMouseEvent = () => { // 定义鼠标点击事件 model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null)); model.canvasContainer?.addEventListener('pointerup', mouseUp); }; const render = () => { if (model && model.isRender) { model.animationId = requestAnimationFrame(render); model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera); model.stats?.update(); model.orbitControls?.update(); model.camera?.updateMatrixWorld(); workFaceObj?.render(); } }; export const setCss3D = () => { workFaceObj?.setCss3D(); }; export const clearCss3D = () => { workFaceObj?.clearCss3D(); }; // 切换风窗类型 export const setModelType = (type, n = Math.ceil(Math.random() * 10), isShowPlane) => { fiberType = type; return new Promise((resolve) => { if (workFaceObj) { workFaceObj.clearPlanes(); group = workFaceObj.group; workFaceObj.setModalType(type); workFaceObj?.setPlanes(n); showOrHideGasPlane(isShowPlane); if (type == 'workFace1') { // 判断模型类型 var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 }; var oldCameraPosition = { x: 0.055, y: 0.062, z: 0.117 }; var newCameraPosition = { x: -0.17182200678070425, y: 1.7188311320712673, z: 1.787394450495768 }; var newControlsPosition = { x: -0.171622930063528, y: -0.1442344658741759, z: 0.032110784753260874 }; } else if (type == 'workFace2') { var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 }; var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 }; var newCameraPosition = { x: -0.0271, y: 0.9205, z: 0.1973 }; var newControlsPosition = { x: -0.027, y: 0.1244, z: -0.0306 }; } else if (type == 'workFace3') { var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 }; var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 }; var newCameraPosition = { x: -0.026, y: 0.927, z: 0.333 }; var newControlsPosition = { x: -0.026, y: 0.089, z: 0.093 }; } else { var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 }; var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 }; var newCameraPosition = { x: -0.17182200678070425, y: 1.7188311320712673, z: 1.787394450495768 }; var newControlsPosition = { x: -0.171622930063528, y: -0.1442344658741759, z: 0.032110784753260874 }; } if (model.scene.getObjectByName('workFace')) { model.camera.position.set(oldCameraPosition.x, oldCameraPosition.y, oldCameraPosition.z + 20); model.orbitControls.target.set(oldControlsPosition.x, oldControlsPosition.y, oldControlsPosition.z); } setTimeout(async () => { resolve(null); if (!model.scene.getObjectByName('workFace')) { model.scene.add(workFaceObj?.group); } await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8); }, 600); } }); }; export const showOrHideGasPlane = (isShowPlane) => { if (workFaceObj) { if (isShowPlane) { workFaceObj.planeGroup.visible = true; } else { workFaceObj.planeGroup.visible = false; } } }; export const mountedThree = () => { return new Promise(async (resolve) => { model = new UseThree('#workFace3D', '#workFace3DCSS'); model.setEnvMap('test1'); model.renderer.toneMappingExposure = 1.0; // model.renderer = 1; workFaceObj = new WorkFace(model); await workFaceObj.mountedThree(); addMouseEvent(); render(); resolve(null); }); }; export const destroy = () => { if (model) { model.isRender = false; workFaceObj.destroy(); workFaceObj = undefined; model.destroy(); model = null; group = null; } };