fanLocal.three.ts 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. import * as THREE from 'three';
  2. import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
  3. import { animateCamera, getTextCanvas, renderVideo, updateAxisCenter } from '/@/utils/threejs/util';
  4. import UseThree from '../../../../utils/threejs/useThree';
  5. import fcFan from './fcfanLocal.three';
  6. import fmFan from './fmfanLocal.three';
  7. import Smoke from '/@/views/vent/comment/threejs/Smoke';
  8. import gsap from 'gsap';
  9. import useEvent from '../../../../utils/threejs/useEvent';
  10. // import * as dat from 'dat.gui';
  11. // const gui = new dat.GUI();
  12. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  13. const modelName = 'jbfj-hd';
  14. // 模型对象、 文字对象
  15. let model: UseThree | undefined,
  16. group: THREE.Object3D | undefined,
  17. fcFanObj: fcFan | undefined,
  18. fmFanObj: fmFan | undefined,
  19. player1,
  20. fanType,
  21. topSmoke: Smoke | undefined,
  22. downSmoke: Smoke | undefined, //
  23. returnSmoke: Smoke | undefined,
  24. topLife: number | undefined,
  25. downLife: number | undefined,
  26. playerStartClickTime1 = new Date().getTime();
  27. const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent();
  28. // 打灯光
  29. const addLight = () => {
  30. const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
  31. directionalLight.position.set(-564, 602, -261);
  32. group?.add(directionalLight);
  33. // directionalLight.target = group;
  34. // const spotLight = new THREE.SpotLight();
  35. // spotLight.angle = Math.PI / 16;
  36. // spotLight.penumbra = 0;
  37. // spotLight.castShadow = true;
  38. // spotLight.position.set(0, 463, 687);
  39. // scene.add(spotLight);
  40. // spotLight.shadow.camera.near = 0.5; // default
  41. // spotLight.shadow.camera.far = 1000; // default
  42. // spotLight.shadow.focus = 1;
  43. // spotLight.shadow.bias = -0.000002;
  44. // spotLight.target = group;
  45. // const pointLight6 = new THREE.PointLight(0xffffff, 1, 500);
  46. // pointLight6.position.set(-131, 64, -1);
  47. // pointLight6.shadow.bias = 0.05;
  48. // group?.add(pointLight6);
  49. // gui.add(directionalLight.position, 'x', -1000, 1000);
  50. // gui.add(directionalLight.position, 'y', -1000, 1000);
  51. // gui.add(directionalLight.position, 'z', -1000, 1000);
  52. // gui.add(pointLight6.position, 'x', -500, 500);
  53. // gui.add(pointLight6.position, 'y', -500, 500);
  54. // gui.add(pointLight6.position, 'z', -500, 500);
  55. // gui.add(pointLight6, 'distance', 0, 500);
  56. };
  57. // 重置摄像头
  58. const resetCamera = () => {
  59. model.camera.position.set(0, -1000, 100);
  60. model.camera.far = 1000;
  61. model.orbitControls?.update();
  62. model.camera.updateProjectionMatrix();
  63. };
  64. // 设置模型位置
  65. const setModalPosition = () => {
  66. if (!group) return;
  67. group.position.set(0, 10, -50);
  68. group.rotation.y = Math.PI / 2;
  69. };
  70. const setControls = () => {
  71. if (model && model.orbitControls) {
  72. model.orbitControls.panSpeed = 0.5;
  73. model.orbitControls.rotateSpeed = 0.5;
  74. model.orbitControls.maxPolarAngle = Math.PI / 2.4;
  75. model.orbitControls.minPolarAngle = Math.PI / 3;
  76. }
  77. };
  78. // 切换局部通风机类型
  79. export const setModelType = (type) => {
  80. fanType = type;
  81. return new Promise((resolve) => {
  82. // 显示双道风窗
  83. let childGroup;
  84. if (fanType === 'fm' && fcFanObj && fcFanObj.group) {
  85. if (group?.getObjectByName('jbfj-fc')) {
  86. group?.remove(fcFanObj.group);
  87. }
  88. childGroup = fmFanObj?.group;
  89. if (group && group?.getObjectByName('text5') && group?.getObjectByName('text4')) {
  90. group.getObjectByName('text5')['visible'] = false;
  91. group.getObjectByName('text4')['visible'] = true;
  92. }
  93. } else if (fanType === 'fc' && fmFanObj && fmFanObj.group) {
  94. // 显示单道风窗
  95. if (group?.getObjectByName('jbfj-fm')) {
  96. group?.remove(fmFanObj.group);
  97. }
  98. childGroup = fcFanObj?.group;
  99. if (group && group?.getObjectByName('text5') && group?.getObjectByName('text4')) {
  100. group.getObjectByName('text5')['visible'] = true;
  101. group.getObjectByName('text4')['visible'] = false;
  102. }
  103. } else {
  104. if (group?.getObjectByName('jbfj-fc')) {
  105. group?.remove(fcFanObj.group);
  106. }
  107. if (group?.getObjectByName('jbfj-fm')) {
  108. group?.remove(fmFanObj.group);
  109. }
  110. if (group && group?.getObjectByName('text5') && group?.getObjectByName('text4')) {
  111. group.getObjectByName('text5')['visible'] = false;
  112. group.getObjectByName('text4')['visible'] = false;
  113. }
  114. childGroup = null;
  115. }
  116. setTimeout(async () => {
  117. if (childGroup) group?.add(childGroup);
  118. const oldCameraPosition = { x: 615, y: 275, z: 744 };
  119. await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: 0.08, y: 21.73, z: 78.45 }, { x: 0.13, y: -0.82, z: 0.236 }, model, 0.8);
  120. resolve(null);
  121. }, 300);
  122. });
  123. };
  124. /* 添加监控数据 */
  125. export const addText = (selectData) => {
  126. if (!group) {
  127. return;
  128. }
  129. const screenDownText = VENT_PARAM['modalText']
  130. ? VENT_PARAM['modalText']
  131. : History_Type['type'] == 'remote'
  132. ? `国能神东煤炭集团监制`
  133. : '煤炭科学技术研究院有限公司研制';
  134. const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
  135. const textArr = [
  136. {
  137. text: `智能局部通风机监测与控制系统`,
  138. font: 'normal 30px Arial',
  139. color: '#009900',
  140. strokeStyle: '#002200',
  141. x: 20,
  142. y: 108,
  143. },
  144. {
  145. text: `供风距离(m):`,
  146. font: 'normal 30px Arial',
  147. color: '#009900',
  148. strokeStyle: '#002200',
  149. x: 0,
  150. y: 152,
  151. },
  152. {
  153. text: `${
  154. selectData.fchimenylength ? selectData.fchimenylength : selectData.airSupplyDistence_merge ? selectData.airSupplyDistence_merge : '-'
  155. }`,
  156. font: 'normal 30px Arial',
  157. color: '#009900',
  158. strokeStyle: '#002200',
  159. x: 228,
  160. y: 152,
  161. },
  162. {
  163. text: `风筒直径(mm): `,
  164. font: 'normal 30px Arial',
  165. color: '#009900',
  166. strokeStyle: '#002200',
  167. x: 0,
  168. y: 200,
  169. },
  170. {
  171. text: ` ${selectData.fchimenydiamlimit ? selectData.fchimenydiamlimit : selectData.ductDiameter_merge ? selectData.ductDiameter_merge : '-'}`,
  172. font: 'normal 30px Arial',
  173. color: '#009900',
  174. strokeStyle: '#002200',
  175. x: 220,
  176. y: 200,
  177. },
  178. {
  179. text: `故障诊断:`,
  180. font: 'normal 30px Arial',
  181. color: '#009900',
  182. strokeStyle: '#002200',
  183. x: 0,
  184. y: 245,
  185. },
  186. {
  187. text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
  188. font: 'normal 30px Arial',
  189. color: '#009900',
  190. strokeStyle: '#002200',
  191. x: 220,
  192. y: 245,
  193. },
  194. {
  195. text: `型号功率:`,
  196. font: 'normal 30px Arial',
  197. color: '#009900',
  198. strokeStyle: '#002200',
  199. x: 0,
  200. y: 285,
  201. },
  202. {
  203. text: `${selectData.model_Power_merge ? selectData.model_Power_merge : '-'}`,
  204. font: 'normal 26px Arial',
  205. color: '#009900',
  206. strokeStyle: '#002200',
  207. x: 220,
  208. y: 285,
  209. },
  210. {
  211. text: screenDownText,
  212. font: 'normal 28px Arial',
  213. color: '#009900',
  214. strokeStyle: '#002200',
  215. x: screenDownTextX,
  216. y: 325,
  217. },
  218. ];
  219. getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
  220. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  221. const textMaterial = new THREE.MeshBasicMaterial({
  222. // 关于材质并未讲解 实操即可熟悉 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
  223. map: textMap, // 设置纹理贴图
  224. transparent: true,
  225. side: THREE.FrontSide, // 这里是双面渲染的意思
  226. });
  227. textMaterial.blending = THREE.CustomBlending;
  228. const monitorPlane = group.getObjectByName('monitorText');
  229. if (monitorPlane) {
  230. monitorPlane.material = textMaterial;
  231. } else {
  232. const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
  233. const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
  234. planeMesh.name = 'monitorText';
  235. planeMesh.scale.set(0.0135, 0.0135, 0.0135);
  236. planeMesh.rotation.y = -Math.PI / 2;
  237. planeMesh.position.set(-84.79, 0.82, 17.0);
  238. group.add(planeMesh);
  239. }
  240. });
  241. };
  242. // // css3D文字
  243. export const addCssText = () => {
  244. if (!group) return;
  245. if (!group.getObjectByName('text1')) {
  246. const element = document.getElementById('inputBox') as HTMLElement;
  247. if (element) {
  248. const fanLocalCSS3D = new CSS3DObject(element);
  249. fanLocalCSS3D.name = 'text1';
  250. fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
  251. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  252. fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
  253. group.add(fanLocalCSS3D);
  254. }
  255. }
  256. if (!group.getObjectByName('text2')) {
  257. const element = document.getElementById('outBox') as HTMLElement;
  258. if (element) {
  259. const fanLocalCSS3D = new CSS3DObject(element);
  260. fanLocalCSS3D.name = 'text2';
  261. fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
  262. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  263. fanLocalCSS3D.position.set(74.63, 13.54, 3.84);
  264. group.add(fanLocalCSS3D);
  265. }
  266. }
  267. if (!group.getObjectByName('text3')) {
  268. const element = document.getElementById('returnBox') as HTMLElement;
  269. if (element) {
  270. const fanLocalCSS3D = new CSS3DObject(element);
  271. fanLocalCSS3D.name = 'text3';
  272. fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
  273. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  274. fanLocalCSS3D.position.set(-25.97, 9.3, -15.09);
  275. group.add(fanLocalCSS3D);
  276. }
  277. }
  278. if (!group.getObjectByName('text4')) {
  279. const element = document.getElementById('gateBox') as HTMLElement;
  280. if (element) {
  281. // element.innerHTML = '';
  282. const fanLocalCSS3D = new CSS3DObject(element);
  283. fanLocalCSS3D.name = 'text4';
  284. fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
  285. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  286. fanLocalCSS3D.position.set(-73.13, 8.44, -23.52);
  287. group.add(fanLocalCSS3D);
  288. }
  289. }
  290. if (!group.getObjectByName('text5')) {
  291. const element = document.getElementById('windownBox') as HTMLElement;
  292. if (element) {
  293. // element.innerHTML = '';
  294. const fanLocalCSS3D = new CSS3DObject(element);
  295. fanLocalCSS3D.name = 'text5';
  296. fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
  297. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  298. fanLocalCSS3D.position.set(-28.44, 9.78, -40.42);
  299. group.add(fanLocalCSS3D);
  300. }
  301. }
  302. if (!group.getObjectByName('text7')) {
  303. const element = document.getElementById('inputBox0') as HTMLElement;
  304. if (element) {
  305. const fanLocalCSS3D = new CSS3DObject(element);
  306. fanLocalCSS3D.name = 'text7';
  307. fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
  308. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  309. fanLocalCSS3D.position.set(-84.23, 4.97, -18.92);
  310. group.add(fanLocalCSS3D);
  311. }
  312. }
  313. if (!group.getObjectByName('text6')) {
  314. const element = document.getElementById('inputBox1') as HTMLElement;
  315. if (element) {
  316. const fanLocalCSS3D = new CSS3DObject(element);
  317. fanLocalCSS3D.name = 'text6';
  318. fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
  319. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  320. fanLocalCSS3D.position.set(-84.23, 6.89, -4.2);
  321. group.add(fanLocalCSS3D);
  322. }
  323. }
  324. if (!group.getObjectByName('text8')) {
  325. const element = document.getElementById('gasBox3') as HTMLElement;
  326. if (element) {
  327. const fanLocalCSS3D = new CSS3DObject(element);
  328. fanLocalCSS3D.name = 'text8';
  329. fanLocalCSS3D.scale.set(0.03, 0.03, 0.03);
  330. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  331. fanLocalCSS3D.position.set(-90.04, 6, 5);
  332. group.add(fanLocalCSS3D);
  333. }
  334. }
  335. if (!group.getObjectByName('text9')) {
  336. const element = document.getElementById('gasBox2') as HTMLElement;
  337. if (element) {
  338. const fanLocalCSS3D = new CSS3DObject(element);
  339. fanLocalCSS3D.name = 'text9';
  340. fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
  341. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  342. fanLocalCSS3D.position.set(-40, 6, -41);
  343. group.add(fanLocalCSS3D);
  344. }
  345. }
  346. if (!group.getObjectByName('text10')) {
  347. const element = document.getElementById('gasBox1') as HTMLElement;
  348. if (element) {
  349. const fanLocalCSS3D = new CSS3DObject(element);
  350. fanLocalCSS3D.name = 'text10';
  351. fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
  352. fanLocalCSS3D.rotation.y = -Math.PI / 2;
  353. fanLocalCSS3D.position.set(100, 10, -45);
  354. group.add(fanLocalCSS3D);
  355. }
  356. }
  357. };
  358. // export const playSmoke = (controlType, deviceType, frequency, state) => {
  359. // if (frequency) {
  360. // setSmokeFrequency(deviceType, frequency);
  361. // }
  362. // if (controlType === 'startSmoke') {
  363. // runFly(deviceType, state);
  364. // }
  365. // };
  366. export const playSmoke = (selectData) => {
  367. // debugger;
  368. // console.log('selectData[Fan1fHz]------------》', selectData['Fan1fHz'], Number(selectData['Fan1fHz']));
  369. if (selectData['Fan1StartStatus'] == '1') {
  370. // 主风机打开
  371. // setSmokeFrequency('top', Number(selectData['Fan1fHz']) || 40);
  372. setSmokeFrequency('top', 40);
  373. runFly('top', 'open');
  374. } else {
  375. // 备风机关闭
  376. runFly('top', 'close');
  377. }
  378. if (selectData['Fan2StartStatus'] == '1') {
  379. // 备风机打开
  380. // setSmokeFrequency('down', Number(selectData['Fan2fHz']) || 40);
  381. setSmokeFrequency('down', 40);
  382. runFly('down', 'open');
  383. } else {
  384. // 备风机关闭
  385. runFly('down', 'close');
  386. }
  387. if (selectData['Fan1StartStatus'] != '1' && selectData['Fan2StartStatus'] != '1') {
  388. runFly('all', 'close');
  389. }
  390. // if (frequency) {
  391. // setSmokeFrequency(deviceType, frequency);
  392. // }
  393. // if (controlType === 'startSmoke') {
  394. // runFly(deviceType, state);
  395. // }
  396. };
  397. const initFly = async () => {
  398. const topCurve = [
  399. {
  400. path0: new THREE.Vector3(-89.84, 2.359, 4.91),
  401. path1: new THREE.Vector3(-85.678, 2.359, 3.61),
  402. isSpread: true,
  403. spreadDirection: -1, //
  404. },
  405. {
  406. path0: new THREE.Vector3(-85.678, 2.352, 3.66),
  407. path1: new THREE.Vector3(-85.636, 2.353, -3.829),
  408. isSpread: false,
  409. spreadDirection: 0,
  410. },
  411. {
  412. path0: new THREE.Vector3(-85.636, 2.353, -3.829),
  413. path1: new THREE.Vector3(-85.636, 1.026, -5.881),
  414. isSpread: false,
  415. spreadDirection: 0,
  416. },
  417. {
  418. path0: new THREE.Vector3(-85.636, 1.026, -5.881),
  419. path1: new THREE.Vector3(-85.618, 0.887, -12.862),
  420. isSpread: false,
  421. spreadDirection: 0,
  422. },
  423. {
  424. path0: new THREE.Vector3(-85.618, 0.827, -12.962),
  425. path1: new THREE.Vector3(80.404, 0.827, -12.962),
  426. isSpread: false,
  427. spreadDirection: 0,
  428. },
  429. {
  430. path0: new THREE.Vector3(80.404, 0.827, -12.962),
  431. path1: new THREE.Vector3(93.164, 0.85, -12.962),
  432. isSpread: true,
  433. spreadDirection: 1, // 1是由小变大,-1是由大变小
  434. },
  435. ];
  436. const downCurve = [
  437. {
  438. path0: new THREE.Vector3(-94.84, -0.388, 3.61),
  439. path1: new THREE.Vector3(-85.678, -0.393, 3.61),
  440. isSpread: true,
  441. spreadDirection: -1, //
  442. },
  443. {
  444. path0: new THREE.Vector3(-85.678, -0.393, 3.275),
  445. path1: new THREE.Vector3(-85.636, -0.392, -3.829),
  446. isSpread: false,
  447. spreadDirection: 0,
  448. },
  449. {
  450. path0: new THREE.Vector3(-85.636, -0.392, -3.829),
  451. path1: new THREE.Vector3(-85.636, 0.926, -5.881),
  452. isSpread: false,
  453. spreadDirection: 0,
  454. },
  455. {
  456. path0: new THREE.Vector3(-85.636, 1.026, -5.881),
  457. path1: new THREE.Vector3(-85.618, 0.887, -12.862),
  458. isSpread: false,
  459. spreadDirection: 0,
  460. },
  461. {
  462. path0: new THREE.Vector3(-85.618, 0.887, -12.962),
  463. path1: new THREE.Vector3(80.404, 0.887, -12.962),
  464. isSpread: false,
  465. spreadDirection: 0,
  466. },
  467. {
  468. path0: new THREE.Vector3(80.404, 0.887, -12.962),
  469. path1: new THREE.Vector3(93.164, 0.91, -12.962),
  470. isSpread: true,
  471. spreadDirection: 1, // 1是由小变大,-1是由大变小
  472. },
  473. ];
  474. const returnCurve = [
  475. {
  476. path0: new THREE.Vector3(93.164, 0.85, -12.962),
  477. path1: new THREE.Vector3(86.39, 0.827, -12.962),
  478. isSpread: false,
  479. spreadDirection: 2,
  480. },
  481. {
  482. path0: new THREE.Vector3(86.39, 0.827, -12.962),
  483. path1: new THREE.Vector3(83.341, 0.847, -17.658),
  484. isSpread: false,
  485. spreadDirection: 2,
  486. },
  487. {
  488. path0: new THREE.Vector3(83.341, 0.847, -17.658),
  489. path1: new THREE.Vector3(-29.077, 0.847, -17.658),
  490. isSpread: false,
  491. spreadDirection: 2,
  492. },
  493. {
  494. path0: new THREE.Vector3(-29.077, 0.847, -17.658),
  495. path1: new THREE.Vector3(-29.64, 0.827, -39.047),
  496. isSpread: false,
  497. spreadDirection: 2,
  498. },
  499. ];
  500. if (!topSmoke) {
  501. topSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
  502. topSmoke.setPath(topCurve);
  503. await topSmoke.setPoints();
  504. group?.add(topSmoke.points);
  505. }
  506. if (!downSmoke) {
  507. downSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
  508. downSmoke.setPath(downCurve);
  509. await downSmoke.setPoints();
  510. group?.add(downSmoke.points);
  511. }
  512. if (!returnSmoke) {
  513. returnSmoke = new Smoke('/model/img/texture-smoke.png', '#777777', 0, 0.35, 1.5, 200);
  514. returnSmoke.setPath(returnCurve);
  515. await returnSmoke.setPoints();
  516. group?.add(returnSmoke.points);
  517. }
  518. };
  519. const runFly = (deviceType, state) => {
  520. if (state === 'open') {
  521. if (deviceType === 'top') {
  522. if (downSmoke && downSmoke.frameId) {
  523. downSmoke.stopSmoke();
  524. }
  525. if (topSmoke && !topSmoke.frameId) {
  526. topSmoke.startSmoke();
  527. }
  528. } else {
  529. if (topSmoke && topSmoke.frameId) {
  530. topSmoke.stopSmoke();
  531. }
  532. if (downSmoke && !downSmoke.frameId) {
  533. downSmoke.startSmoke();
  534. }
  535. }
  536. if (returnSmoke && !returnSmoke.frameId) {
  537. returnSmoke?.startSmoke();
  538. }
  539. } else {
  540. if (deviceType === 'top') {
  541. if (topSmoke && topSmoke.frameId) {
  542. topSmoke.stopSmoke();
  543. }
  544. } else {
  545. if (downSmoke && downSmoke.frameId) {
  546. downSmoke.stopSmoke();
  547. }
  548. }
  549. }
  550. if (deviceType === 'all' && state === 'close') {
  551. returnSmoke?.stopSmoke();
  552. }
  553. };
  554. // 调频 30-50 (life 300 - 800) , 25 = (800 - 300)/ 20
  555. const setSmokeFrequency = (deviceType, frequency) => {
  556. const life = (frequency - 30) * 25;
  557. let duration = 0;
  558. let smoke;
  559. if (deviceType === 'top') {
  560. if (topLife == life) {
  561. return;
  562. }
  563. topLife = life;
  564. smoke = topSmoke;
  565. duration = (Math.abs(life - smoke.life) / 500) * 25;
  566. } else {
  567. if (downLife == life) {
  568. return;
  569. }
  570. downLife = life;
  571. smoke = downSmoke;
  572. duration = (Math.abs(life - smoke.life) / 500) * 25;
  573. }
  574. if (smoke) {
  575. gsap.to(smoke, {
  576. life: life,
  577. duration: duration,
  578. ease: 'easeInCubic',
  579. overwrite: true,
  580. });
  581. }
  582. };
  583. const clearFly = () => {
  584. if (topSmoke) topSmoke.clearSmoke();
  585. if (downSmoke) downSmoke.clearSmoke();
  586. if (returnSmoke) returnSmoke.clearSmoke();
  587. };
  588. // 初始化事件
  589. const startAnimation = () => {
  590. // 定义鼠标点击事件
  591. model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  592. model.canvasContainer?.addEventListener('pointerup', mouseUp);
  593. };
  594. // 鼠标点击、松开事件
  595. const mouseEvent = (event) => {
  596. if (event.button == 0) {
  597. model?.canvasContainer?.addEventListener('mousemove', mousemove);
  598. mouseDownFn(<UseThree>model, <THREE.Object3D>group, event, (intersects) => {
  599. intersects.find((intersect) => {
  600. const mesh = intersect.object;
  601. });
  602. });
  603. console.log('摄像头控制信息', model?.orbitControls, model?.camera);
  604. }
  605. };
  606. const mouseUp = () => {
  607. if (!model) return;
  608. mouseUpFn(model);
  609. model.canvasContainer?.removeEventListener('mousemove', mousemove);
  610. };
  611. const mousemove = () => {
  612. mousemoveFn();
  613. };
  614. export const mountedThree = (playerVal1) => {
  615. player1 = playerVal1;
  616. return new Promise((resolve) => {
  617. // model = VENT_PARAM['simulatedPassword'] ? new UseThree('#fanLocal3D', '#fanLocal3DCSS') : new UseThree('#fanLocal3D');
  618. model = new UseThree('#fanLocal3D', '#fanLocal3DCSS');
  619. model.setEnvMap('test1.hdr');
  620. model.renderer.toneMappingExposure = 1.0;
  621. if (model.renderer) {
  622. model.renderer.sortObjects = true;
  623. }
  624. resetCamera();
  625. model.setGLTFModel([modelName]).then(async (gltf) => {
  626. group = <THREE.Object3D>gltf[0];
  627. const Fengtongbu01 = group?.getObjectByName('Cylinder1054') as THREE.Mesh;
  628. if (Fengtongbu01) {
  629. const textMaterial = new THREE.MeshBasicMaterial({
  630. color: '#000',
  631. transparent: true,
  632. opacity: 0.3,
  633. side: THREE.DoubleSide, // 这里是双面渲染的意思
  634. });
  635. Fengtongbu01.material = textMaterial;
  636. Fengtongbu01.renderOrder = 300;
  637. }
  638. model?.scene?.add(group);
  639. setModalPosition();
  640. setControls();
  641. await initFly();
  642. model?.animate();
  643. addLight(model?.scene);
  644. fcFanObj = new fcFan(model);
  645. await fcFanObj.mountedThree();
  646. fmFanObj = new fmFan(model);
  647. await fmFanObj.mountedThree();
  648. startAnimation();
  649. resolve(model);
  650. });
  651. });
  652. };
  653. export const destroy = () => {
  654. if (model) {
  655. model.isRender = false;
  656. console.log('场景销毁后信息----------->', model.renderer?.info);
  657. clearFly();
  658. topSmoke = undefined;
  659. downSmoke = undefined;
  660. returnSmoke = undefined;
  661. if (fcFanObj) fcFanObj.destroy();
  662. if (fmFanObj) fmFanObj.destroy();
  663. group = undefined;
  664. model.destroy();
  665. model = undefined;
  666. }
  667. };