mainWind.xj.threejs.ts 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. import * as THREE from 'three';
  2. import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
  3. import Smoke from '/@/views/vent/comment/threejs/Smoke';
  4. import { renderVideo } from '/@/utils/threejs/util';
  5. import gsap from 'gsap';
  6. class mainXjWindRect {
  7. model;
  8. modelName = 'mainXjWindRect';
  9. group: THREE.Group | null = null; // 主通风机场景
  10. motorGroup1: THREE.Group | null = null; //电机
  11. motorGroup2: THREE.Group | null = null; //电机
  12. gearFront = {
  13. gear1: null, //扇叶
  14. gear2: null, //扇叶
  15. gear1Direction: -1,
  16. gear2Direction: 1,
  17. gearFrameId: undefined,
  18. gearRotateFactor: 0.5,
  19. endGearRotateFactor: 3,
  20. };
  21. gearBack = {
  22. gear1: null, //扇叶
  23. gear2: null, //扇叶
  24. gear1Direction: -1, // 扇叶转动方向
  25. gear2Direction: 1, // 扇叶转动方向
  26. gearFrameId: undefined,
  27. gearRotateFactor: 0.5, // 扇叶转动因素
  28. endGearRotateFactor: 3, // 扇叶最终转动速度因素
  29. };
  30. oldMaterial: THREE.Material = new THREE.MeshStandardMaterial();
  31. // smoke;
  32. frontSmoke: Smoke | null = null; // 前面风流对象
  33. backSmoke: Smoke | null = null; // 后面风流对象
  34. player1; // 视频播放器
  35. playerStartClickTime1 = new Date().getTime();
  36. frontWindowGroup;
  37. backWindowGroup;
  38. windowAngle = 0;
  39. fbmAnimationClip: THREE.AnimationClip | null = null;
  40. fbmMixers: THREE.AnimationMixer | null = null;
  41. fbmOpenAction: THREE.AnimationAction | null = null;
  42. constructor(model, playerVal1) {
  43. this.model = model;
  44. this.player1 = playerVal1;
  45. }
  46. // 添加 cssObject
  47. addCssText() {
  48. if (!this.group) {
  49. return;
  50. }
  51. const ztfjGroup = this.group.getObjectByName('ztfj');
  52. if (!this.group.getObjectByName('monitorText1')) {
  53. const worldPosition = new THREE.Vector3();
  54. ztfjGroup?.getObjectByName('FengJiWaiKe_1')?.getWorldPosition(worldPosition);
  55. const element = document.getElementById('inputBox') as HTMLElement;
  56. const mainCSS3D = new CSS3DObject(element);
  57. mainCSS3D.name = 'monitorText1';
  58. mainCSS3D.scale.set(0.09, 0.09, 0.09);
  59. mainCSS3D.position.set(worldPosition.x + 34, worldPosition.y - 5, worldPosition.z - 35);
  60. mainCSS3D.lookAt(worldPosition.x + 34, worldPosition.y + 5, worldPosition.z + 2);
  61. this.group.add(mainCSS3D);
  62. }
  63. if (!this.group.getObjectByName('monitorText2')) {
  64. const worldPosition = new THREE.Vector3();
  65. ztfjGroup?.getObjectByName('FengJiWaiKe_2')?.getWorldPosition(worldPosition);
  66. const element = document.getElementById('inputBox1') as HTMLElement;
  67. const mainCSS3D = new CSS3DObject(element);
  68. mainCSS3D.name = 'monitorText2';
  69. mainCSS3D.scale.set(0.09, 0.09, 0.09);
  70. mainCSS3D.position.set(worldPosition.x + 34, worldPosition.y - 5, worldPosition.z - 20);
  71. mainCSS3D.lookAt(worldPosition.x + 34, worldPosition.y + 5, worldPosition.z + 2);
  72. this.group.add(mainCSS3D);
  73. }
  74. if (!this.group.getObjectByName('monitorText3')) {
  75. const worldPosition = new THREE.Vector3();
  76. const fbmGroup = this.group?.getObjectByName('fbm') as THREE.Group;
  77. if (fbmGroup) {
  78. fbmGroup?.getObjectByName('Box022')?.getWorldPosition(worldPosition);
  79. const element = document.getElementById('fbm') as HTMLElement;
  80. if (element) {
  81. const mainCSS3D = new CSS3DObject(element);
  82. mainCSS3D.name = 'monitorText3';
  83. mainCSS3D.scale.set(0.07, 0.07, 0.07);
  84. mainCSS3D.position.set(worldPosition.x + 20, worldPosition.y - 8, worldPosition.z - 20);
  85. mainCSS3D.lookAt(worldPosition.x + 20, worldPosition.y - 0, worldPosition.z + 2);
  86. this.group.add(mainCSS3D);
  87. }
  88. }
  89. }
  90. }
  91. addEcharts() {
  92. const echartsBox = document.getElementById('fan-echarts');
  93. if (echartsBox) {
  94. const canvasObj = echartsBox.getElementsByTagName('canvas')[0];
  95. // 将canvas 纹理转换为材质
  96. const echartsMap = new THREE.CanvasTexture(canvasObj); // 关键一步
  97. const echartsMaterial = new THREE.MeshBasicMaterial({
  98. map: echartsMap, // 设置纹理贴图
  99. transparent: true,
  100. side: THREE.FrontSide, // 这里是双面渲染的意思
  101. });
  102. echartsMaterial.blending = THREE.CustomBlending;
  103. const monitorPlane = this.group?.getObjectByName('monitorEcharts');
  104. if (monitorPlane) {
  105. monitorPlane.material = echartsMaterial;
  106. } else {
  107. const planeGeometry = new THREE.PlaneGeometry(17.6, 9.9); // 平面3维几何体PlaneGeometry
  108. const planeMesh = new THREE.Mesh(planeGeometry, echartsMaterial);
  109. planeMesh.name = 'monitorEcharts';
  110. planeMesh.scale.set(1, 1, 1);
  111. planeMesh.position.set(-47.38, 13.227, -21.79);
  112. this.group?.add(planeMesh);
  113. }
  114. }
  115. }
  116. initAnimation() {}
  117. startAnimation() {}
  118. /* 更新动画 */
  119. render() {
  120. if (!this.model) {
  121. return;
  122. }
  123. if (this.fbmMixers) this.fbmMixers?.update(1 / 25);
  124. }
  125. /* 点击风窗,风窗全屏 */
  126. mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
  127. // 判断是否点击到视频
  128. intersects.find((intersect) => {
  129. const mesh = intersect.object;
  130. if (mesh.name === 'player1') {
  131. if (new Date().getTime() - this.playerStartClickTime1 < 400) {
  132. // 双击,视频放大
  133. if (this.player1) {
  134. this.player1.requestFullscreen();
  135. }
  136. }
  137. this.playerStartClickTime1 = new Date().getTime();
  138. return true;
  139. }
  140. return false;
  141. });
  142. }
  143. mouseUpModel() {}
  144. async setDeviceFrequency(deviceType, state, frequencyVal?) {
  145. // 调节频率
  146. if (frequencyVal) {
  147. this.resetSmokeParam(deviceType, frequencyVal, 0);
  148. }
  149. // this.openOrCloseValve(deviceType, state, 0);
  150. this.startGearAnimation(deviceType, state, '', 0);
  151. if (deviceType === 'front') {
  152. this.frontSmoke?.startSmoke();
  153. } else {
  154. this.backSmoke?.startSmoke();
  155. }
  156. setTimeout(() => {
  157. this.lookMotor(deviceType, state, 10);
  158. }, 2000);
  159. }
  160. async openDevice(deviceType, smokeDirection, frequencyVal, duration?) {
  161. if (smokeDirection) {
  162. this.setSmokeDirection(deviceType, smokeDirection);
  163. }
  164. let smoke;
  165. if (deviceType === 'front') {
  166. smoke = this.frontSmoke;
  167. } else {
  168. smoke = this.backSmoke;
  169. }
  170. if (!smoke.frameId) {
  171. await this.lookMotor(deviceType, 'open', duration);
  172. // await this.openOrCloseValve(deviceType, 'open', duration);
  173. this.startGearAnimation(deviceType, 'open', smokeDirection, frequencyVal, duration);
  174. smoke.startSmoke(duration);
  175. }
  176. }
  177. async closeDevice(deviceType, flag = true) {
  178. let smoke;
  179. if (deviceType === 'front') {
  180. smoke = this.frontSmoke;
  181. } else if (deviceType === 'back') {
  182. smoke = this.backSmoke;
  183. }
  184. if (smoke && smoke.frameId) {
  185. // console.log('风机关闭', deviceType);
  186. if (flag) {
  187. smoke.stopSmoke();
  188. // await this.openOrCloseValve(deviceType, 'close');
  189. this.startGearAnimation(deviceType, 'close', '', null);
  190. await this.lookMotor(deviceType, 'close');
  191. } else {
  192. smoke.stopSmoke(0);
  193. // await this.openOrCloseValve(deviceType, 'close', 0);
  194. this.startGearAnimation(deviceType, 'close', '', null, 0);
  195. await this.lookMotor(deviceType, 'close', 0);
  196. }
  197. }
  198. }
  199. async setSmokeDirection(deviceType, smokeDirection) {
  200. const windowPositivePath = [
  201. {
  202. path0: new THREE.Vector3(4.441, 20.267, 3.614),
  203. path1: new THREE.Vector3(5.041, 6.806, 3.614),
  204. isSpread: true,
  205. spreadDirection: -1, //
  206. },
  207. {
  208. path0: new THREE.Vector3(7.441, 0.806, 3.614),
  209. path1: new THREE.Vector3(41.583, 1.485, 3.614),
  210. isSpread: false,
  211. spreadDirection: 0, //
  212. },
  213. {
  214. path0: new THREE.Vector3(41.583, 1.485, 3.614),
  215. path1: new THREE.Vector3(42.741, 5.364, 3.614),
  216. isSpread: false,
  217. spreadDirection: 0,
  218. },
  219. {
  220. path0: new THREE.Vector3(42.741, 5.364, 3.614),
  221. path1: new THREE.Vector3(44.741, 17.267, 3.614),
  222. isSpread: true,
  223. spreadDirection: 1, // 1是由小变大(出),-1是由大变小(进)
  224. },
  225. ];
  226. const windowInversePath = [
  227. {
  228. path0: new THREE.Vector3(44.741, 17.267, 3.614),
  229. path1: new THREE.Vector3(42.741, 5.364, 3.614),
  230. isSpread: true,
  231. spreadDirection: -1, //
  232. },
  233. {
  234. path0: new THREE.Vector3(42.741, 5.364, 3.614),
  235. path1: new THREE.Vector3(41.583, 1.485, 3.614),
  236. isSpread: false,
  237. spreadDirection: 0, //
  238. },
  239. {
  240. path0: new THREE.Vector3(41.583, 1.485, 3.614),
  241. path1: new THREE.Vector3(7.441, 0.806, 3.614),
  242. isSpread: false,
  243. spreadDirection: 0, // 1是由小变大,-1是由大变小
  244. },
  245. {
  246. path0: new THREE.Vector3(4.441, 17.267, 3.614),
  247. path1: new THREE.Vector3(5.041, 6.806, 3.614),
  248. isSpread: true,
  249. spreadDirection: 1, //
  250. },
  251. ];
  252. const tubPositivePath = [
  253. {
  254. path0: new THREE.Vector3(7.441, 0.806, 3.614),
  255. path1: new THREE.Vector3(44.583, 1.485, 3.614),
  256. isSpread: false,
  257. spreadDirection: 0, //
  258. },
  259. {
  260. path0: new THREE.Vector3(44.583, 1.485, 3.614),
  261. path1: new THREE.Vector3(45.741, 5.364, 3.614),
  262. isSpread: false,
  263. spreadDirection: 0,
  264. },
  265. {
  266. path0: new THREE.Vector3(45.741, 5.364, 3.614),
  267. path1: new THREE.Vector3(47.741, 17.267, 3.614),
  268. isSpread: true,
  269. spreadDirection: 1, // 1是由小变大(出),-1是由大变小(进)
  270. },
  271. ];
  272. const tubInversePath = [
  273. {
  274. path0: new THREE.Vector3(47.741, 17.267, 3.614),
  275. path1: new THREE.Vector3(45.741, 5.364, 3.614),
  276. isSpread: true,
  277. spreadDirection: -1, //
  278. },
  279. {
  280. path0: new THREE.Vector3(45.741, 5.364, 3.614),
  281. path1: new THREE.Vector3(44.583, 1.485, 3.614),
  282. isSpread: false,
  283. spreadDirection: 0, //
  284. },
  285. {
  286. path0: new THREE.Vector3(44.583, 1.485, 3.614),
  287. path1: new THREE.Vector3(7.441, 0.806, 3.614),
  288. isSpread: false,
  289. spreadDirection: 0, // 1是由小变大,-1是由大变小
  290. },
  291. ];
  292. let smoke;
  293. if (deviceType === 'front') {
  294. smoke = this.frontSmoke;
  295. } else if (deviceType === 'back') {
  296. smoke = this.backSmoke;
  297. }
  298. switch (smokeDirection) {
  299. case 'tubPositivePath': // 风筒正
  300. smoke.setPath(tubPositivePath);
  301. break;
  302. case 'tubInversePath': // 风筒反
  303. smoke.setPath(tubInversePath);
  304. break;
  305. case 'windowPositivePath': // 风窗正
  306. smoke.setPath(windowPositivePath);
  307. break;
  308. case 'windowInversePath': // 风窗反
  309. smoke.setPath(windowInversePath);
  310. break;
  311. }
  312. }
  313. /* 播放气流动画 */
  314. /**
  315. *
  316. * @param controlType // 设备控制类型
  317. * @param deviceType //前后风机
  318. * @param frequencyVal // 风机运行频率
  319. * @param state // 打开、关闭状态
  320. */
  321. async playSmoke(controlType, deviceType, frequencyVal, state, smokeDirection) {
  322. if (frequencyVal) {
  323. this.resetSmokeParam(deviceType, frequencyVal);
  324. }
  325. if (controlType === 'startSmoke') {
  326. if (state === 'stop') {
  327. await this.closeDevice(deviceType);
  328. } else {
  329. // 开启时需要设置方向
  330. await this.openDevice(deviceType, smokeDirection, frequencyVal);
  331. }
  332. } else if (controlType === 'changeDirection') {
  333. // 改变扇叶转动方向、反风
  334. this.startGearAnimation(deviceType, 'changeDirection', smokeDirection, frequencyVal);
  335. let smoke;
  336. if (deviceType === 'front') {
  337. smoke = this.frontSmoke;
  338. } else {
  339. smoke = this.backSmoke;
  340. }
  341. if (smoke && smoke.frameId) {
  342. await smoke.stopSmoke();
  343. await this.setSmokeDirection(deviceType, smokeDirection);
  344. smoke.startSmoke();
  345. }
  346. } else if (controlType === 'frequency') {
  347. this.startGearAnimation(deviceType, 'frequency', smokeDirection, frequencyVal);
  348. } else if (controlType === 'initiatePlay') {
  349. this.openDevice(deviceType, smokeDirection, frequencyVal, 0);
  350. } else if (controlType === 'changeSmoke') {
  351. //
  352. }
  353. }
  354. stopSmoke() {
  355. this.closeDevice('front', false);
  356. this.closeDevice('back', false);
  357. }
  358. /* 打开或关闭蝶阀 */
  359. openOrCloseValve(deviceType, flag, duration = 3) {
  360. const ztfjGroup = this.group?.getObjectByName('ztfj')?.getObjectByName('WaiKe');
  361. return new Promise((resolve) => {
  362. let diefa;
  363. if (deviceType == 'front') {
  364. diefa = ztfjGroup?.getObjectByName('Cylinder1206') as THREE.Mesh;
  365. } else {
  366. diefa = ztfjGroup?.getObjectByName('Cylinder1041') as THREE.Mesh;
  367. }
  368. let rotationY;
  369. if (flag == 'open') {
  370. rotationY = 0;
  371. } else {
  372. rotationY = Math.PI / 2;
  373. }
  374. if (diefa) {
  375. gsap.to(diefa.rotation, {
  376. y: rotationY,
  377. duration: duration,
  378. ease: 'none',
  379. onComplete: function () {
  380. resolve(null);
  381. },
  382. });
  383. }
  384. });
  385. }
  386. /* 风流调频, 范围1-50 */
  387. // opacityFactor (0.4 300)
  388. // life 最小 300, 最大 50
  389. // speedFactor 最大0, 最小100
  390. resetSmokeParam(deviceType, frequency, duration = 5) {
  391. if (frequency < 1) frequency = 1;
  392. if (frequency > 50) frequency = 50;
  393. let smoke;
  394. if (deviceType === 'front') {
  395. smoke = this.frontSmoke;
  396. } else {
  397. smoke = this.backSmoke;
  398. }
  399. const opacityFactor = (frequency / 50) * 0.8;
  400. duration = (Number(Math.abs(smoke.opacityFactor - opacityFactor).toFixed(1)) / 0.8) * 5;
  401. const life = (-250 / 50) * frequency + 300;
  402. gsap.to(smoke, {
  403. opacityFactor: opacityFactor,
  404. life: life,
  405. duration: duration,
  406. ease: 'easeInCirc',
  407. overwrite: true,
  408. });
  409. }
  410. /* 显示电机 */
  411. lookMotor(deviceType, flag, duration = 5) {
  412. return new Promise((resolve) => {
  413. const ztfjGroup = this.group?.getObjectByName('ztfj');
  414. let fengJiWaiKeGoup1, fengJiWaiKeGoup2, mesh, mesh1, mesh2, motorGroup;
  415. fengJiWaiKeGoup1 = ztfjGroup?.getObjectByName('FengJiWaiKe_1'); //前
  416. fengJiWaiKeGoup2 = ztfjGroup?.getObjectByName('FengJiWaiKe_2'); //前
  417. mesh1 = fengJiWaiKeGoup1?.getObjectByName('transparent_shell02'); //前
  418. mesh2 = fengJiWaiKeGoup2?.getObjectByName('transparent_shell00'); //后
  419. if (deviceType == 'front') {
  420. mesh = mesh1;
  421. motorGroup = this.motorGroup2;
  422. } else {
  423. mesh = mesh2;
  424. motorGroup = this.motorGroup1;
  425. }
  426. if (mesh && motorGroup) {
  427. if (flag == 'open') {
  428. mesh.material.depthWrite = false;
  429. mesh.material.depthTest = false;
  430. motorGroup.visible = true;
  431. gsap.to(mesh.material, {
  432. opacity: 0.1,
  433. duration: duration,
  434. overwrite: true,
  435. onComplete: function () {
  436. // mesh.material.color = '#000';
  437. resolve(null);
  438. },
  439. });
  440. } else {
  441. const opacity = mesh.material.opacity;
  442. Object.assign(mesh.material, this.oldMaterial, { opacity: opacity });
  443. mesh.material.depthWrite = true;
  444. mesh.material.depthTest = true;
  445. gsap.to(mesh.material, {
  446. opacity: 1,
  447. duration: 1,
  448. overwrite: true,
  449. onComplete: function () {
  450. resolve(null);
  451. },
  452. });
  453. }
  454. }
  455. });
  456. }
  457. /* 齿轮转动动画 1 - 50 最大3 */
  458. startGearAnimation(deviceType, flag, smokeDirection, frequencyVal, duration = 8) {
  459. console.log(deviceType, flag);
  460. debugger;
  461. let gearObj, gearDirection;
  462. if (deviceType === 'front') {
  463. gearObj = this.gearFront;
  464. } else {
  465. gearObj = this.gearBack;
  466. }
  467. if (smokeDirection === 'tubPositivePath') {
  468. gearDirection = 1;
  469. } else if (smokeDirection === 'tubInversePath') {
  470. gearDirection = -1;
  471. }
  472. if (frequencyVal) {
  473. const endGearRotateFactor = (3 / 50) * frequencyVal;
  474. duration = (8 / 3) * Math.abs(gearObj.endGearRotateFactor - endGearRotateFactor);
  475. gearObj.endGearRotateFactor = endGearRotateFactor;
  476. }
  477. const gearAnimation = () => {
  478. gsap.to(gearObj, {
  479. gearRotateFactor: gearObj.endGearRotateFactor,
  480. duration: duration,
  481. ease: 'easeInCubic',
  482. repeat: 0,
  483. overwrite: true,
  484. });
  485. const clock = new THREE.Clock(); // 时钟
  486. const h = () => {
  487. if (gearObj.gear1 && gearObj.gear2) {
  488. gearObj.gearFrameId = requestAnimationFrame(h);
  489. const dt = clock.getDelta();
  490. gearObj.gear1.rotation.x += dt * gearObj.gearRotateFactor * gearObj.gear1Direction;
  491. gearObj.gear2.rotation.x += dt * gearObj.gearRotateFactor * gearObj.gear2Direction;
  492. }
  493. };
  494. h();
  495. };
  496. if (flag === 'changeDirection') {
  497. if (gearDirection == -1 * gearObj.gear1Direction) {
  498. // 齿轮正在转,需要停止后再反方向转
  499. gsap.to(gearObj, {
  500. gearRotateFactor: 0,
  501. duration: duration,
  502. ease: 'easeInCubic',
  503. repeat: 0,
  504. onComplete: function () {
  505. window.cancelAnimationFrame(gearObj.gearFrameId);
  506. gearObj.gearFrameId = undefined;
  507. gearObj.gear1Direction = -1 * gearObj.gear1Direction;
  508. gearObj.gear2Direction = -1 * gearObj.gear2Direction;
  509. gearAnimation();
  510. },
  511. });
  512. }
  513. } else if (flag === 'open') {
  514. gearObj.gear1Direction = gearDirection;
  515. gearObj.gear2Direction = -1 * gearDirection;
  516. gearAnimation();
  517. } else if (flag === 'close') {
  518. gsap.to(gearObj, {
  519. gearRotateFactor: 0,
  520. duration: duration,
  521. ease: 'easeInCubic',
  522. repeat: 0,
  523. overwrite: true,
  524. onComplete: function () {
  525. window.cancelAnimationFrame(gearObj.gearFrameId);
  526. gearObj.gearFrameId = undefined;
  527. },
  528. });
  529. } else if (flag === 'frequency') {
  530. gsap.to(gearObj, {
  531. gearRotateFactor: gearObj.endGearRotateFactor,
  532. duration: duration,
  533. ease: 'easeInCubic',
  534. repeat: 0,
  535. overwrite: true,
  536. });
  537. }
  538. }
  539. /* 初始化口上面的气体 */
  540. initSmokeMass() {
  541. if (!this.frontSmoke) {
  542. this.frontSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.38, 1.8, 100);
  543. }
  544. if (!this.backSmoke) {
  545. this.backSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.38, 1.8, 100);
  546. }
  547. }
  548. /* 设置气流位置 */
  549. async setSmokePosition() {
  550. if (this.frontSmoke) {
  551. await this.frontSmoke.setPoints();
  552. this.frontSmoke.points.name = 'frontSmoke';
  553. this.group?.add(this.frontSmoke.points);
  554. // this.frontSmoke.points.position.set(-2.51, 2.51, 8.25);
  555. this.frontSmoke.points.position.set(3.18, 4.43, 2.31);
  556. }
  557. if (this.backSmoke) {
  558. await this.backSmoke.setPoints();
  559. this.backSmoke.points.name = 'backSmoke';
  560. this.group?.add(this.backSmoke.points);
  561. // this.backSmoke.points.position.set(-2.2, 3.13, -7.8);
  562. this.backSmoke.points.position.set(3.18, 4.36, -13.99);
  563. }
  564. }
  565. /** 初始化电机 */
  566. async initMotor() {
  567. // 前电机
  568. const motorGltf1 = await this.model.setGLTFModel('dj1');
  569. this.motorGroup1 = motorGltf1[0] as THREE.Group;
  570. this.motorGroup1?.position.set(10, 1, -6);
  571. // this.motorGroup1.visible = false;
  572. this.motorGroup1.traverse((item) => {
  573. if (item instanceof THREE.Object3D) {
  574. item.renderOrder = -1;
  575. if (item.name === 'fan_blade003') {
  576. // @ts-ignore
  577. this.gearBack.gear1 = item as THREE.Group;
  578. } else if (item.name === 'fan_blade005') {
  579. // @ts-ignore
  580. this.gearBack.gear2 = item as THREE.Group;
  581. }
  582. }
  583. });
  584. this.motorGroup1.renderOrder = -1;
  585. this.group?.add(this.motorGroup1);
  586. // 后电机
  587. const motorGltf2 = await this.model.setGLTFModel('dj2');
  588. this.motorGroup2 = motorGltf2[0] as THREE.Group;
  589. this.motorGroup2?.position.set(10, 1, -6);
  590. // this.motorGroup2.visible = false;
  591. this.motorGroup2.traverse((item) => {
  592. if (item instanceof THREE.Object3D) {
  593. item.renderOrder = -1;
  594. if (item.name === 'fan_blade007') {
  595. // @ts-ignore
  596. this.gearFront.gear1 = item as THREE.Group;
  597. } else if (item.name === 'fan_blade006') {
  598. // @ts-ignore
  599. this.gearFront.gear2 = item as THREE.Group;
  600. }
  601. }
  602. });
  603. this.motorGroup2.renderOrder = -1;
  604. this.group?.add(this.motorGroup2);
  605. }
  606. openOrCloseWindow(deviceType, flag) {
  607. const _this = this;
  608. let endAngle = 0,
  609. windowGroup;
  610. if (deviceType === 'front') {
  611. windowGroup = this.frontWindowGroup;
  612. }
  613. if (deviceType === 'back') {
  614. windowGroup = this.backWindowGroup;
  615. }
  616. if (flag == 'openWindow') {
  617. // 打开风窗
  618. endAngle = 1;
  619. } else {
  620. // 关闭风窗
  621. endAngle = 0;
  622. }
  623. if (windowGroup)
  624. gsap.to(this, {
  625. windowAngle: endAngle,
  626. duration: Math.abs(endAngle - this.windowAngle) * 10,
  627. ease: 'none',
  628. onUpdate: function () {
  629. windowGroup.children.forEach((mesh) => {
  630. mesh.rotation.z = _this.windowAngle;
  631. });
  632. },
  633. });
  634. }
  635. playAnimation(flag, duration?) {}
  636. mountedThree() {
  637. this.group = new THREE.Group();
  638. debugger;
  639. return new Promise(async (resolve) => {
  640. this.model.setGLTFModel(['ztfj-xj']).then(async (gltf) => {
  641. const ztfjModal = gltf[0].children[0];
  642. ztfjModal.name = 'ztfj';
  643. ztfjModal.position.set(4.64, 4.11, 1.52);
  644. this.group?.add(gltf[0].children[0]);
  645. // this.group?.position.set(4.77, 3.63, 0.63);
  646. this.group?.position.set(-0.44, 19.88, 22.37);
  647. this.initSmokeMass();
  648. await this.setSmokePosition();
  649. const ztfjGroup = this.group?.getObjectByName('ztfj');
  650. const fengJiWaiKeGoup1 = ztfjGroup?.getObjectByName('FengJiWaiKe_1'); //前
  651. const mesh = fengJiWaiKeGoup1?.getObjectByName('transparent_shell02'); //前
  652. if (mesh && mesh.material) this.oldMaterial = mesh.material as THREE.MeshStandardMaterial;
  653. await this.initMotor();
  654. resolve(null);
  655. });
  656. });
  657. }
  658. destroy() {
  659. this.frontSmoke.clearSmoke();
  660. this.backSmoke.clearSmoke();
  661. this.model.clearGroup(this.motorGroup1);
  662. this.model.clearGroup(this.motorGroup2);
  663. this.model.clearGroup(this.group);
  664. this.motorGroup1 = undefined;
  665. this.motorGroup2 = undefined;
  666. this.gearFront.gear1 = undefined;
  667. this.gearFront.gear2 = undefined;
  668. this.gearBack.gear1 = undefined;
  669. this.gearBack.gear2 = undefined;
  670. this.frontSmoke = undefined;
  671. this.backSmoke = undefined;
  672. this.model = undefined;
  673. this.group = undefined;
  674. }
  675. }
  676. export default mainXjWindRect;