balancePress.threejs.ts 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import UseThree from '../../../../utils/threejs/useThree';
  2. import balancePressBase from './balancePress.threejs.base';
  3. import balancePressTun from './balancePress.threejs.tun';
  4. import { animateCamera } from '/@/utils/threejs/util';
  5. import useEvent from '../../../../utils/threejs/useEvent';
  6. // 模型对象、 文字对象
  7. let model,
  8. balancePressBaseObj: balancePressBase | undefined,
  9. balancePressTunObj: balancePressTun | undefined,
  10. group: THREE.Object3D | undefined,
  11. balancePressType = 'balancePressBase'; // workerFaceFiber
  12. const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent();
  13. // 鼠标点击事件
  14. const mouseEvent = (event) => {
  15. if (event.button == 0) {
  16. model.canvasContainer?.addEventListener('mousemove', mousemove);
  17. mouseDownFn(model, group as THREE.Object3D, event, (intersects) => {
  18. if (balancePressType === 'balancePressType') {
  19. // balancePressBaseObj.mousedownModel.call(balancePressBaseObj, model.rayCaster);
  20. }
  21. });
  22. }
  23. };
  24. const mouseUp = () => {
  25. if (!model) return;
  26. mouseUpFn(model, 1);
  27. model.canvasContainer?.removeEventListener('mousemove', mousemove);
  28. };
  29. const mousemove = () => {
  30. mousemoveFn();
  31. };
  32. const addMouseEvent = () => {
  33. // 定义鼠标点击事件
  34. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  35. model.canvasContainer?.addEventListener('pointerup', mouseUp);
  36. };
  37. export const play = (controlType, deviceType, frequency, state, duration?) => {
  38. if (balancePressType === 'balancePressBase') {
  39. return balancePressBaseObj?.playSmoke.call(balancePressBaseObj, controlType, deviceType, frequency, state, duration);
  40. }
  41. };
  42. export const updateText = (selectData) => {
  43. if (balancePressType === 'balancePressBase') {
  44. return balancePressBaseObj?.addText.call(balancePressBaseObj, selectData);
  45. }
  46. };
  47. // 切换模型类型
  48. export const setModelType = (type) => {
  49. debugger;
  50. balancePressType = type;
  51. return new Promise((resolve) => {
  52. if (balancePressType === 'balancePressBase' && balancePressBaseObj && balancePressBaseObj.group) {
  53. group = balancePressBaseObj.group;
  54. if (group) {
  55. const oldCameraPosition = { x: 27.9165, y: 17.3763, z: 51.3388 };
  56. setTimeout(async () => {
  57. model.scene.add(balancePressBaseObj?.group);
  58. await animateCamera(
  59. oldCameraPosition,
  60. { x: 3.9025, y: 0.7782, z: 6.6307 },
  61. { x: 0.1218, y: 3.8213, z: 17.27671 },
  62. { x: 0.2348, y: 0.7182, z: 6.8413 },
  63. model,
  64. 0.8
  65. );
  66. }, 300);
  67. }
  68. resolve(null);
  69. } else if (balancePressType === 'balancePressTun' && balancePressTunObj && balancePressTunObj.group) {
  70. group = balancePressTunObj.group;
  71. if (group) {
  72. const oldCameraPosition = { x: 27.9165, y: 17.3763, z: 51.3388 };
  73. setTimeout(async () => {
  74. model.scene.add(balancePressTunObj?.group);
  75. await animateCamera(
  76. oldCameraPosition,
  77. { x: 3.9025, y: 0.7782, z: 6.6307 },
  78. { x: 0.30694425126412234, y: 6.664533888402769, z: 3.7879281016804667 },
  79. { x: 0.27488693515931245, y: 0.6259183086723961, z: 0.23709305659449886 },
  80. model,
  81. 0.8
  82. );
  83. }, 300);
  84. }
  85. resolve(null);
  86. }
  87. });
  88. };
  89. export const mountedThree = () => {
  90. return new Promise(async (resolve) => {
  91. model = new UseThree('#balancePress3D');
  92. model.setEnvMap('test1.hdr');
  93. model.renderer.toneMappingExposure = 1.0;
  94. balancePressBaseObj = new balancePressBase(model);
  95. await balancePressBaseObj.mountedThree();
  96. balancePressTunObj = new balancePressTun(model);
  97. await balancePressTunObj.mountedThree();
  98. addMouseEvent();
  99. model.animate();
  100. resolve(null);
  101. });
  102. };
  103. export const destroy = () => {
  104. if (model) {
  105. model.isRender = false;
  106. console.log('场景销毁前信息----------->', model.renderer?.info);
  107. balancePressBaseObj?.destroy();
  108. balancePressBaseObj = undefined;
  109. balancePressTunObj?.destroy();
  110. balancePressTunObj = undefined;
  111. group = undefined;
  112. model.destroy();
  113. model = undefined;
  114. }
  115. };