1
0

nitrogen.threejs.ts 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import * as THREE from 'three';
  2. import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util';
  3. import UseThree from '../../../../utils/threejs/useThree';
  4. import Nitrogen from './nitrogen.dishang.threejs';
  5. import { useAppStore } from '/@/store/modules/app';
  6. // import * as dat from 'dat.gui';
  7. // const gui = new dat.GUI();
  8. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  9. // 模型对象、 文字对象
  10. let model, //
  11. group,
  12. nitrogenObj,
  13. modalType = 'lmWindRect';
  14. const appStore = useAppStore();
  15. // 鼠标点击、松开事件
  16. const mouseEvent = (event) => {
  17. event.stopPropagation();
  18. const widthScale = appStore.getWidthScale;
  19. const heightScale = appStore.getHeightScale;
  20. // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  21. model.mouse.x =
  22. ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
  23. model.mouse.y =
  24. -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
  25. (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
  26. updateAxisCenter(model, event);
  27. if (group) {
  28. const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[];
  29. if (intersects.length > 0) {
  30. // 单道、 双道
  31. if (modalType === 'nitrogen') {
  32. nitrogenObj.mousedownModel.call(nitrogenObj, intersects);
  33. }
  34. }
  35. console.log('99999------>', model.camera, model.orbitControls);
  36. }
  37. };
  38. /* 添加监控数据 */
  39. export const addText = (selectData) => {
  40. if (modalType === 'nitrogen') {
  41. return nitrogenObj.addText.call(nitrogenObj, selectData);
  42. }
  43. };
  44. export const play = () => {
  45. if (modalType === 'nitrogen') {
  46. return nitrogenObj.play.call(nitrogenObj);
  47. }
  48. };
  49. // 切换风窗类型
  50. export const setModelType = (type) => {
  51. modalType = type;
  52. model.camera.position.set(-1000, 100, 500);
  53. return new Promise((resolve) => {
  54. // 显示双道风窗
  55. if (modalType === 'nitrogen') {
  56. group = nitrogenObj.group;
  57. setModalCenter(group);
  58. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  59. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  60. model.scene.add(nitrogenObj.group);
  61. setTimeout(async () => {
  62. resolve(null);
  63. await animateCamera(
  64. oldCameraPosition,
  65. oldControlsPosition,
  66. { x: -0.24658823766780538, y: 35.50352092191473, z: 83.90511756512278 },
  67. { x: 1.5582599568763913, y: -3.2828007511721147, z: 2.2606374587827234 },
  68. model,
  69. 0.8
  70. );
  71. }, 300);
  72. }
  73. });
  74. };
  75. export const mountedThree = () => {
  76. return new Promise(async (resolve) => {
  77. model = new UseThree('#nitrogen3D');
  78. model.setEnvMap('test1');
  79. model.renderer.toneMappingExposure = 1;
  80. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  81. nitrogenObj = new Nitrogen(model);
  82. await nitrogenObj.mountedThree();
  83. setModelType('nitrogen');
  84. resolve(null);
  85. model.animate();
  86. });
  87. };
  88. export const destroy = () => {
  89. if (model) {
  90. nitrogenObj?.destroy();
  91. model.deleteModal();
  92. model = null;
  93. group = null;
  94. }
  95. };