balancePress.threejs.ts 3.1 KB

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