nitrogen.threejs.ts 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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 useEvent from '../../../../utils/threejs/useEvent';
  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 = 'nitrogen';
  14. const { mouseDownFn } = useEvent();
  15. // 鼠标点击、松开事件
  16. const mouseEvent = (event) => {
  17. mouseDownFn(model, group, event, (intersects) => {
  18. if (modalType === 'nitrogen') {
  19. nitrogenObj.mousedownModel.call(nitrogenObj, intersects);
  20. }
  21. console.log('摄像头控制信息', model.orbitControls, model.camera);
  22. });
  23. };
  24. /* 添加监控数据 */
  25. export const addText = (selectData) => {
  26. if (modalType === 'nitrogen') {
  27. return nitrogenObj.addText.call(nitrogenObj, selectData);
  28. }
  29. };
  30. export const play = () => {
  31. if (modalType === 'nitrogen') {
  32. return nitrogenObj.play.call(nitrogenObj);
  33. }
  34. };
  35. // 切换风窗类型
  36. export const setModelType = (type) => {
  37. modalType = type;
  38. model.camera.position.set(-1000, 100, 500);
  39. return new Promise((resolve) => {
  40. // 显示双道风窗
  41. if (modalType === 'nitrogen') {
  42. group = nitrogenObj.group;
  43. // setModalCenter(group);
  44. const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  45. const oldControlsPosition = { x: -10, y: 10, z: 10 };
  46. model.scene.add(nitrogenObj.group);
  47. let newCameraPosition = { x: 0, y: 0, z: 0 },
  48. newControlsPosition = { x: 0, y: 0, z: 0 };
  49. if (group.children.length == 5) {
  50. newCameraPosition = { x: 3.4434042980363104, y: 34.06459454762187, z: 106.31900957493957 };
  51. newControlsPosition = { x: 3.060603700582905, y: -10.818677071155214, z: 6.036159227572685 };
  52. } else if (group.children.length == 4) {
  53. newCameraPosition = { x: 3.90030651836962, y: 38.026892031369755, z: 87.12943006242206 };
  54. newControlsPosition = { x: 3.584174940307743, y: -6.858117412269035, z: 4.311833565101436 };
  55. } else if (group.children.length == 3) {
  56. newCameraPosition = { x: 4.033864762820565, y: 46.68282110004381, z: 82.43762902763777 };
  57. newControlsPosition = { x: 3.7177327628205648, y: 1.7978121000437965, z: -0.37996697236224625 };
  58. }
  59. setTimeout(async () => {
  60. resolve(null);
  61. await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
  62. }, 300);
  63. }
  64. });
  65. };
  66. export const mountedThree = (nitrogenNum) => {
  67. return new Promise(async (resolve) => {
  68. model = new UseThree('#nitrogen3D', '#nitrogenCss3D');
  69. model.setEnvMap('test1');
  70. model.renderer.toneMappingExposure = 0.8;
  71. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  72. nitrogenObj = new Nitrogen(model);
  73. await nitrogenObj.mountedThree(nitrogenNum);
  74. setModelType('nitrogen');
  75. resolve(null);
  76. model.animate();
  77. });
  78. };
  79. export const destroy = () => {
  80. if (model) {
  81. nitrogenObj?.destroy();
  82. model.deleteModal();
  83. model = null;
  84. group = null;
  85. }
  86. };