nitrogen.threejs.ts 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import * as THREE from 'three';
  2. import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util';
  3. import UseThree from '../../../../utils/threejs/useThree';
  4. import NitrogenOverground from './nitrogen.dishang.threejs';
  5. import NitrogenUnderground from './nitrogen.dixia.threejs';
  6. import useEvent from '../../../../utils/threejs/useEvent';
  7. // import * as dat from 'dat.gui';
  8. // const gui = new dat.GUI();
  9. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  10. // 模型对象、 文字对象
  11. let model: UseThree | undefined, //
  12. group: THREE.Object3D | undefined,
  13. nitrogenObj: NitrogenOverground | undefined,
  14. nitrogenUndergroundObj: NitrogenUnderground | undefined,
  15. modalType = 'nitrogen';
  16. const { mouseDownFn } = useEvent();
  17. // 鼠标点击、松开事件
  18. const mouseEvent = (event) => {
  19. if (event.button == 0) {
  20. mouseDownFn(model as UseThree, group as THREE.Object3D, event, (intersects) => {
  21. if (modalType === 'nitrogen') {
  22. nitrogenObj?.mousedownModel.call(nitrogenObj, intersects);
  23. }
  24. console.log('摄像头控制信息', model?.orbitControls, model?.camera);
  25. });
  26. }
  27. };
  28. /* 添加监控数据 */
  29. export const addText = () => {
  30. if (modalType === 'nitrogen') {
  31. return nitrogenObj?.addCssText?.call(nitrogenObj);
  32. }
  33. };
  34. export const play = () => {
  35. if (modalType === 'nitrogen') {
  36. return nitrogenObj?.play.call(nitrogenObj);
  37. }
  38. };
  39. // 切换风窗类型
  40. export const setModelType = (type, nitrogenNum?) => {
  41. modalType = type;
  42. model?.camera?.position.set(-1000, 100, 500);
  43. return new Promise((resolve) => {
  44. // 地上模型、地下模型切换
  45. if (modalType === 'nitrogen' && nitrogenObj && nitrogenObj.group) {
  46. if (model?.scene?.getObjectByName('nitrogenUnderground') && nitrogenUndergroundObj && nitrogenUndergroundObj.group) {
  47. model.scene.remove(nitrogenUndergroundObj.group);
  48. nitrogenUndergroundObj.clearCssText();
  49. }
  50. if (nitrogenNum) {
  51. nitrogenObj.nitrogenNum = nitrogenNum;
  52. const flag = nitrogenNum % 2 == 0 ? 0 : 1;
  53. const currentNitrogenNum = nitrogenObj.group.children.length - 2;
  54. // 判断地上注氮机的机数
  55. if (currentNitrogenNum < nitrogenNum) {
  56. for (let i = 0; i < nitrogenNum; i++) {
  57. let nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
  58. if (!nitrogenModal) {
  59. nitrogenModal = nitrogenObj.nitrogenGroup[i];
  60. nitrogenObj.group.add(nitrogenModal);
  61. }
  62. const c = Math.floor(nitrogenNum / 2);
  63. if (flag) {
  64. nitrogenModal.position.set(0, 0, 1.355 * (c - i));
  65. } else {
  66. nitrogenModal.position.set(0, 0, (c - i - 0.5) * 1.355);
  67. }
  68. }
  69. } else if (currentNitrogenNum > nitrogenNum) {
  70. for (let i = nitrogenNum - 1; i < nitrogenNum; i++) {
  71. const nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
  72. nitrogenObj.group.remove(nitrogenModal);
  73. }
  74. } else {
  75. }
  76. setModalCenter(nitrogenObj.group);
  77. nitrogenObj.addCssText();
  78. nitrogenObj.setModalPosition();
  79. }
  80. group = nitrogenObj.group;
  81. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  82. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  83. model?.scene?.add(nitrogenObj.group);
  84. let newCameraPosition = { x: 0, y: 0, z: 0 },
  85. newControlsPosition = { x: 0, y: 0, z: 0 };
  86. if (group.children.length == 5) {
  87. newCameraPosition = { x: 3.4434042980363104, y: 34.06459454762187, z: 106.31900957493957 };
  88. newControlsPosition = { x: 3.060603700582905, y: -10.818677071155214, z: 6.036159227572685 };
  89. } else if (group.children.length == 4) {
  90. newCameraPosition = { x: 3.90030651836962, y: 38.026892031369755, z: 87.12943006242206 };
  91. newControlsPosition = { x: 3.584174940307743, y: -6.858117412269035, z: 4.311833565101436 };
  92. } else if (group.children.length == 3) {
  93. newCameraPosition = { x: 4.033864762820565, y: 46.68282110004381, z: 82.43762902763777 };
  94. newControlsPosition = { x: 3.7177327628205648, y: 1.7978121000437965, z: -0.37996697236224625 };
  95. }
  96. setTimeout(async () => {
  97. model?.scene?.add(group);
  98. resolve(null);
  99. await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
  100. }, 300);
  101. } else if (modalType === 'nitrogenUnderground' && nitrogenUndergroundObj && nitrogenUndergroundObj.group) {
  102. if (model?.scene?.getObjectByName('nitrogen') && nitrogenObj && nitrogenObj.group) {
  103. model.scene.remove(nitrogenObj.group);
  104. nitrogenObj.clearCssText();
  105. }
  106. nitrogenUndergroundObj.nitrogenNum = nitrogenNum;
  107. group = nitrogenUndergroundObj.group;
  108. nitrogenUndergroundObj.addCssText();
  109. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  110. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  111. const newCameraPosition = { x: 21.7662617168586, y: 65.76772405405443, z: 106.19314654690366 },
  112. newControlsPosition = { x: -13.223797639205223, y: 13.119121404116392, z: 0.7650646324543227 };
  113. setTimeout(async () => {
  114. model?.scene?.add(group);
  115. resolve(null);
  116. await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
  117. }, 300);
  118. }
  119. });
  120. };
  121. export const mountedThree = () => {
  122. return new Promise(async (resolve) => {
  123. model = new UseThree('#nitrogen3D', '#nitrogenCss3D');
  124. model.setEnvMap('test1.hdr');
  125. model.renderer.toneMappingExposure = 1.0;
  126. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  127. nitrogenObj = new NitrogenOverground(model);
  128. await nitrogenObj.mountedThree(4);
  129. nitrogenUndergroundObj = new NitrogenUnderground(model);
  130. await nitrogenUndergroundObj.mountedThree();
  131. // setModelType('nitrogen');
  132. resolve(null);
  133. model.animate();
  134. });
  135. };
  136. export const destroy = () => {
  137. if (model) {
  138. model.isRender = false;
  139. console.log('场景销毁前信息----------->', model.renderer?.info);
  140. nitrogenObj?.destroy();
  141. nitrogenObj = undefined;
  142. nitrogenUndergroundObj?.destroy();
  143. nitrogenUndergroundObj = undefined;
  144. group = undefined;
  145. model.destroy();
  146. model = undefined;
  147. }
  148. };