window.threejs.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import * as THREE from 'three';
  2. import UseThree from '../../../../utils/threejs/useThree';
  3. import singleWindow from './dandaoFc.threejs';
  4. import doubleWindow from './shuangdaoFc.threejs';
  5. import singleWindowXk from './dandaoFcXk.threejs';
  6. import { animateCamera } from '/@/utils/threejs/util';
  7. import useEvent from '../../../../utils/threejs/useEvent';
  8. import { useGlobSetting } from '/@/hooks/setting';
  9. // import * as dat from 'dat.gui';
  10. // const gui = new dat.GUI();
  11. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  12. // 模型对象、 文字对象
  13. let model: UseThree,
  14. singleWindowObj,
  15. doubleWindowObj: doubleWindow,
  16. singleWindowXkObj: singleWindowXk,
  17. group: THREE.Object3D,
  18. windowType = 'singleWindow';
  19. const { mouseDownFn } = useEvent();
  20. // 打灯光
  21. const addLight = () => {
  22. if (!model || !model.scene) return;
  23. const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  24. directionalLight.position.set(-110, 150, 647);
  25. model.scene?.add(directionalLight);
  26. // directionalLight.target = group;
  27. const pointLight2 = new THREE.PointLight(0xffffff, 1, 150);
  28. pointLight2.position.set(-101, 34, 16);
  29. pointLight2.shadow.bias = 0.05;
  30. model.scene.add(pointLight2);
  31. const pointLight3 = new THREE.PointLight(0xffffff, 1, 150);
  32. pointLight3.position.set(19, 25, -7);
  33. pointLight3.shadow.bias = 0.05;
  34. model.scene.add(pointLight3);
  35. const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
  36. pointLight6.position.set(51, 51, 9);
  37. pointLight6.shadow.bias = 0.05;
  38. model.scene.add(pointLight6);
  39. };
  40. // 初始化左右摇摆动画
  41. const startAnimation = () => {
  42. // 定义鼠标点击事件
  43. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  44. model.canvasContainer?.addEventListener('pointerup', (event) => {
  45. event.stopPropagation();
  46. // 单道、 双道
  47. if (windowType === 'doubleWindow' && doubleWindowObj) {
  48. doubleWindowObj.mouseUpModel.call(doubleWindowObj);
  49. } else if (windowType === 'singleWindow' && singleWindowObj) {
  50. singleWindowObj.mouseUpModel.call(singleWindowObj);
  51. } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
  52. singleWindowXkObj.mouseUpModel.call(singleWindowXkObj);
  53. }
  54. });
  55. };
  56. // 鼠标点击、松开事件
  57. const mouseEvent = (event) => {
  58. if (event.button == 0) {
  59. mouseDownFn(model, group, event, (intersects) => {
  60. if (windowType === 'doubleWindow' && doubleWindowObj) {
  61. doubleWindowObj.mousedownModel.call(doubleWindowObj, intersects);
  62. } else if (windowType === 'singleWindow' && singleWindowObj) {
  63. singleWindowObj.mousedownModel.call(singleWindowObj, intersects);
  64. } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
  65. singleWindowXkObj.mousedownModel.call(singleWindowXkObj, intersects);
  66. }
  67. });
  68. }
  69. };
  70. export const addMonitorText = (selectData) => {
  71. if (windowType === 'doubleWindow' && doubleWindowObj) {
  72. return doubleWindowObj.addMonitorText.call(doubleWindowObj, selectData);
  73. } else if (windowType === 'singleWindow' && singleWindowObj) {
  74. return singleWindowObj.addMonitorText.call(singleWindowObj, selectData);
  75. } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
  76. return singleWindowXkObj.addMonitorText.call(singleWindowXkObj, selectData);
  77. }
  78. };
  79. export const play = (rotationParam, flag) => {
  80. if (windowType === 'doubleWindow' && doubleWindowObj) {
  81. return doubleWindowObj.play.call(doubleWindowObj, rotationParam, flag);
  82. } else if (windowType === 'singleWindow' && singleWindowObj) {
  83. return singleWindowObj.play.call(singleWindowObj, rotationParam, flag);
  84. } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
  85. return singleWindowXkObj.play.call(singleWindowXkObj, rotationParam, flag);
  86. }
  87. };
  88. // 切换风窗类型
  89. export const setModelType = (type) => {
  90. // if (!model || !model.scene) return;
  91. windowType = type;
  92. return new Promise((resolve) => {
  93. // 显示双道风窗
  94. if (windowType === 'doubleWindow' && doubleWindowObj && doubleWindowObj.group) {
  95. model.startAnimation = doubleWindowObj.render.bind(doubleWindowObj);
  96. model.scene?.remove(group);
  97. group = doubleWindowObj.group;
  98. const oldCameraPosition = { x: 100, y: 0, z: 500 };
  99. model.scene?.add(doubleWindowObj.group);
  100. setTimeout(async () => {
  101. resolve(null);
  102. await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: 66.257, y: 57.539, z: 94.313 }, { x: 0, y: 0, z: 0 }, model);
  103. }, 300);
  104. } else if (windowType === 'singleWindow') {
  105. // 显示单道风窗
  106. model.startAnimation = singleWindowObj.render.bind(singleWindowObj);
  107. model.scene?.remove(group);
  108. group = singleWindowObj.group;
  109. const oldCameraPosition = { x: 100, y: 0, z: 500 };
  110. model.scene?.add(singleWindowObj.group);
  111. setTimeout(async () => {
  112. resolve(null);
  113. await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: 66.257, y: 57.539, z: 94.313 }, { x: 0, y: 0, z: 0 }, model);
  114. }, 300);
  115. }
  116. });
  117. };
  118. export const mountedThree = (playerDom) => {
  119. const { sysOrgCode } = useGlobSetting();
  120. return new Promise(async (resolve) => {
  121. model = new UseThree('#window3D');
  122. if (!model || !model.renderer || !model.camera) return;
  123. model.setEnvMap('test1');
  124. resolve(null);
  125. model.camera.position.set(100, 0, 1000);
  126. doubleWindowObj = new doubleWindow(model);
  127. if (sysOrgCode === 'sdmtjtbetmk') {
  128. const singleWindowBet = await import('./dandaoFcBet.threejs');
  129. if (singleWindowBet) singleWindowObj = new singleWindowBet.default(model);
  130. } else {
  131. singleWindowObj = new singleWindow(model);
  132. }
  133. doubleWindowObj.mountedThree(playerDom);
  134. singleWindowObj.mountedThree(playerDom);
  135. model.animate();
  136. addLight();
  137. startAnimation();
  138. });
  139. };
  140. export const destroy = () => {
  141. if (model) {
  142. model.isRender = false;
  143. console.log('场景销毁前信息----------->', model.renderer?.info);
  144. model.isRender = false;
  145. doubleWindowObj.destroy();
  146. singleWindowObj.destroy();
  147. model.destroy();
  148. model = null;
  149. group = null;
  150. singleWindowObj = null;
  151. doubleWindowObj = null;
  152. }
  153. };