nitrogen.threejs.ts 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  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 NitrogenFlex from './nitrogen.flex.threejs';
  7. import useEvent from '../../../../utils/threejs/useEvent';
  8. // import * as dat from 'dat.gui';
  9. // const gui = new dat.GUI();
  10. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  11. // 模型对象、 文字对象
  12. let model: UseThree | undefined, //
  13. group: THREE.Object3D | undefined,
  14. nitrogenObj: NitrogenOverground | undefined,
  15. nitrogenUndergroundObj: NitrogenUnderground | undefined,
  16. nitrogenFlexObj: NitrogenFlex | undefined,
  17. modalType = 'nitrogen';
  18. const { mouseDownFn } = useEvent();
  19. // 鼠标点击、松开事件
  20. const mouseEvent = (event) => {
  21. if (event.button == 0) {
  22. mouseDownFn(model as UseThree, group as THREE.Object3D, event, (intersects) => {
  23. if (modalType === 'nitrogen') {
  24. nitrogenObj?.mousedownModel.call(nitrogenObj, intersects);
  25. }
  26. console.log('摄像头控制信息', model?.orbitControls, model?.camera);
  27. });
  28. }
  29. };
  30. /* 添加监控数据 */
  31. export const addText = () => {
  32. if (modalType === 'nitrogen') {
  33. return nitrogenObj?.addCssText?.call(nitrogenObj);
  34. }
  35. };
  36. export const play = () => {
  37. if (modalType === 'nitrogen') {
  38. return nitrogenObj?.play.call(nitrogenObj);
  39. }
  40. };
  41. // 切换风窗类型
  42. export const setModelType = (type, nitrogenNum?) => {
  43. modalType = type;
  44. model?.camera?.position.set(-1000, 100, 500);
  45. return new Promise((resolve) => {
  46. // 地上模型、地下模型切换
  47. if (modalType === 'nitrogen' && nitrogenObj && nitrogenObj.group) {
  48. if (model?.scene?.getObjectByName('nitrogenUnderground') && nitrogenUndergroundObj && nitrogenUndergroundObj.group) {
  49. model.scene.remove(nitrogenUndergroundObj.group);
  50. nitrogenUndergroundObj.clearCssText();
  51. }
  52. if (nitrogenNum) {
  53. nitrogenObj.nitrogenNum = nitrogenNum;
  54. const flag = nitrogenNum % 2 == 0 ? 0 : 1;
  55. const currentNitrogenNum = nitrogenObj.group.children.length - 2;
  56. // 判断地上注氮机的机数
  57. if (currentNitrogenNum < nitrogenNum) {
  58. for (let i = 0; i < nitrogenNum; i++) {
  59. let nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
  60. if (!nitrogenModal) {
  61. nitrogenModal = nitrogenObj.nitrogenGroup[i];
  62. nitrogenObj.group.add(nitrogenModal);
  63. }
  64. const c = Math.floor(nitrogenNum / 2);
  65. if (flag) {
  66. nitrogenModal.position.set(0, 0, 1.355 * (c - i));
  67. } else {
  68. nitrogenModal.position.set(0, 0, (c - i - 0.5) * 1.355);
  69. }
  70. }
  71. } else if (currentNitrogenNum > nitrogenNum) {
  72. for (let i = nitrogenNum - 1; i < nitrogenNum; i++) {
  73. const nitrogenModal = nitrogenObj.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
  74. nitrogenObj.group.remove(nitrogenModal);
  75. }
  76. } else {
  77. }
  78. setModalCenter(nitrogenObj.group);
  79. nitrogenObj.addCssText();
  80. nitrogenObj.setModalPosition();
  81. }
  82. group = nitrogenObj.group;
  83. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  84. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  85. model?.scene?.add(nitrogenObj.group);
  86. let newCameraPosition = { x: 0, y: 0, z: 0 },
  87. newControlsPosition = { x: 0, y: 0, z: 0 };
  88. debugger;
  89. if (group.children.length == 5) {
  90. newCameraPosition = { x: 3.4434042980363104, y: 34.06459454762187, z: 106.31900957493957 };
  91. newControlsPosition = { x: 3.060603700582905, y: -10.818677071155214, z: 6.036159227572685 };
  92. } else if (group.children.length == 4) {
  93. newCameraPosition = { x: 3.90030651836962, y: 38.026892031369755, z: 87.12943006242206 };
  94. newControlsPosition = { x: 3.584174940307743, y: -6.858117412269035, z: 4.311833565101436 };
  95. } else if (group.children.length == 3) {
  96. newCameraPosition = { x: 4.033864762820565, y: 46.68282110004381, z: 82.43762902763777 };
  97. newControlsPosition = { x: 3.7177327628205648, y: 1.7978121000437965, z: -0.37996697236224625 };
  98. } else if (group.children.length == 6) {
  99. newCameraPosition = { x: -112.9018092843876, y: 27.56046920110982, z: 1.512031119343565 };
  100. newControlsPosition = { x: -3.4116337023356875, y: -25.657219350386075, z: 1.0940848922982402 };
  101. }
  102. setTimeout(async () => {
  103. model?.scene?.add(group);
  104. resolve(null);
  105. await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
  106. }, 300);
  107. } else if (modalType === 'nitrogenUnderground' && nitrogenUndergroundObj && nitrogenUndergroundObj.group) {
  108. if (model?.scene?.getObjectByName('nitrogen') && nitrogenObj && nitrogenObj.group) {
  109. model.scene.remove(nitrogenObj.group);
  110. nitrogenObj.clearCssText();
  111. }
  112. nitrogenUndergroundObj.nitrogenNum = nitrogenNum;
  113. group = nitrogenUndergroundObj.group;
  114. nitrogenUndergroundObj.addCssText();
  115. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  116. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  117. const newCameraPosition = { x: 21.7662617168586, y: 65.76772405405443, z: 106.19314654690366 },
  118. newControlsPosition = { x: -13.223797639205223, y: 13.119121404116392, z: 0.7650646324543227 };
  119. setTimeout(async () => {
  120. model?.scene?.add(group);
  121. resolve(null);
  122. await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
  123. }, 300);
  124. } else if (modalType === 'nitrogenFlex' && nitrogenFlexObj && nitrogenFlexObj.group) {
  125. // 地下管路模型(基底 + 注氮机),与地上模型、地下管网模型三者共存,互不影响
  126. if (model?.scene?.getObjectByName('nitrogen') && nitrogenObj && nitrogenObj.group) {
  127. model.scene.remove(nitrogenObj.group);
  128. nitrogenObj.clearCssText();
  129. }
  130. if (model?.scene?.getObjectByName('nitrogenUnderground') && nitrogenUndergroundObj && nitrogenUndergroundObj.group) {
  131. model.scene.remove(nitrogenUndergroundObj.group);
  132. nitrogenUndergroundObj.clearCssText();
  133. }
  134. // 机数由后端决定(1~3 台),动态增减
  135. nitrogenFlexObj.setUnitCount(nitrogenNum ?? 3);
  136. group = nitrogenFlexObj.group;
  137. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  138. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  139. const { camera, target } = nitrogenFlexObj.getCameraConfig();
  140. setTimeout(async () => {
  141. model?.scene?.add(group as THREE.Object3D);
  142. resolve(null);
  143. await animateCamera(oldCameraPosition, oldControlsPosition, camera, target, model, 0.8);
  144. }, 300);
  145. }
  146. });
  147. };
  148. export const mountedThree = () => {
  149. return new Promise(async (resolve) => {
  150. model = new UseThree('#nitrogen3D', '#nitrogenCss3D');
  151. model.setEnvMap('test1.hdr');
  152. model.renderer.toneMappingExposure = 1.0;
  153. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  154. nitrogenObj = new NitrogenOverground(model);
  155. await nitrogenObj.mountedThree(4);
  156. nitrogenUndergroundObj = new NitrogenUnderground(model);
  157. await nitrogenUndergroundObj.mountedThree();
  158. // 地下管路模型(基底 + 注氮机),作为新增视图与上面两个共存
  159. nitrogenFlexObj = new NitrogenFlex(model);
  160. await nitrogenFlexObj.mountedThree();
  161. setModelType('nitrogenUnderground');
  162. resolve(null);
  163. model.animate();
  164. });
  165. };
  166. export const destroy = () => {
  167. if (model) {
  168. model.isRender = false;
  169. console.log('场景销毁前信息----------->', model.renderer?.info);
  170. nitrogenObj?.destroy();
  171. nitrogenObj = undefined;
  172. nitrogenUndergroundObj?.destroy();
  173. nitrogenUndergroundObj = undefined;
  174. nitrogenFlexObj?.destroy();
  175. nitrogenFlexObj = undefined;
  176. group = undefined;
  177. model.destroy();
  178. model = undefined;
  179. }
  180. };