fireDoor.threejs.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import * as THREE from 'three';
  2. import UseThree from '../../../../utils/threejs/useThree';
  3. import FireDoor from './fireDoor.threejs.fire';
  4. import { animateCamera } from '/@/utils/threejs/util';
  5. import useEvent from '../../../../utils/threejs/useEvent';
  6. import { useGlobSetting } from '/@/hooks/setting';
  7. // 模型对象、 文字对象
  8. let model,
  9. fireDoor, //液压风门
  10. group: THREE.Object3D,
  11. fmType = '';
  12. const { mouseDownFn } = useEvent();
  13. // 初始化左右摇摆动画
  14. const startAnimation = () => {
  15. // 定义鼠标点击事件
  16. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  17. model.canvasContainer?.addEventListener('pointerup', (event) => {
  18. event.stopPropagation();
  19. // 单道、 双道
  20. if (fmType === 'fireDoor') {
  21. fireDoor?.mouseUpModel.call(fireDoor);
  22. }
  23. });
  24. };
  25. // 鼠标点击、松开事件
  26. const mouseEvent = (event) => {
  27. if (event.button == 0) {
  28. mouseDownFn(model, group, event, (intersects) => {
  29. if (fmType === 'fireDoor' && fireDoor) {
  30. fireDoor?.mousedownModel.call(fireDoor, intersects);
  31. }
  32. });
  33. // console.log('摄像头控制信息', model.orbitControls, model.camera);
  34. }
  35. };
  36. export const play = (handlerState, flag?) => {
  37. if (fmType === 'fireDoor' && fireDoor) {
  38. return fireDoor.play.call(fireDoor, handlerState, flag);
  39. }
  40. };
  41. // 切换风门类型
  42. export const setModelType = (type) => {
  43. fmType = type;
  44. return new Promise((resolve) => {
  45. // 暂停风门1动画
  46. if (fmType === 'fireDoor' && fireDoor && fireDoor.group) {
  47. if (fireDoor.clipActionArr.door) {
  48. fireDoor.clipActionArr.door.reset();
  49. fireDoor.clipActionArr.door.time = 0.5;
  50. fireDoor.clipActionArr.door.stop();
  51. }
  52. if (fireDoor.damperOpenMesh) fireDoor.damperOpenMesh.visible = false;
  53. if (fireDoor.damperClosedMesh) fireDoor.damperClosedMesh.visible = true;
  54. model.scene.remove(group);
  55. model.startAnimation = fireDoor.render.bind(fireDoor);
  56. group = fireDoor.group;
  57. group.rotation.y = 0;
  58. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  59. setTimeout(async () => {
  60. resolve(null);
  61. model.scene.add(fireDoor.group);
  62. await animateCamera(
  63. oldCameraPosition,
  64. { x: 0, y: 0, z: 0 },
  65. { x: -654.2006991449887, y: 103.16181473511944, z: -30.348656073478562 },
  66. { x: -7.380506513422206, y: 56.36967052459397, z: -29.230675020846963 },
  67. model,
  68. 0.8
  69. );
  70. }, 300);
  71. }
  72. });
  73. };
  74. export const initCameraCanvas = async (playerVal1) => {
  75. if (fmType === 'fireDoor' && fireDoor) {
  76. return await fireDoor.initCamera.call(fireDoor, playerVal1);
  77. }
  78. };
  79. const setControls = () => {
  80. if (model && model.orbitControls) {
  81. model.orbitControls.maxPolarAngle = Math.PI / 2;
  82. model.orbitControls.minPolarAngle = Math.PI / 3;
  83. model.orbitControls.minDistance = 600;
  84. model.orbitControls.maxDistance = 900;
  85. }
  86. };
  87. export const mountedThree = () => {
  88. // const { sysOrgCode } = useGlobSetting();
  89. return new Promise(async (resolve) => {
  90. model = new UseThree('#damper3D', '', '#deviceDetail');
  91. model.setEnvMap('test1');
  92. model.renderer.toneMappingExposure = 1.0;
  93. model.camera.position.set(100, 0, 1000);
  94. fireDoor = new FireDoor(model);
  95. fireDoor.mountedThree();
  96. resolve(null);
  97. setControls();
  98. model.animate();
  99. startAnimation();
  100. });
  101. };
  102. export const destroy = () => {
  103. if (model) {
  104. model.orbitControls.maxPolarAngle = Math.PI;
  105. model.orbitControls.minPolarAngle = 0;
  106. model.orbitControls.enableRotate = true;
  107. model.orbitControls.minDistance = 0;
  108. model.orbitControls.maxDistance = Infinity;
  109. model.orbitControls.update();
  110. model.isRender = false;
  111. if (fireDoor) fireDoor.destroy();
  112. fireDoor = null;
  113. group = null;
  114. model.mixers = [];
  115. model.destroy();
  116. }
  117. model = null;
  118. };