gate.threejs.yy.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. import * as THREE from 'three';
  2. import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
  3. import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
  4. import UseThree from '../../../../utils/threejs/useThree';
  5. import { drawHot } from '/@/utils/threejs/util';
  6. import { useAppStore } from '/@/store/modules/app';
  7. // import * as dat from 'dat.gui';
  8. // const gui = new dat.GUI();
  9. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  10. class Fm1 {
  11. modelName = 'fm1';
  12. model; //
  13. group;
  14. isLRAnimation = true; // 是否开启左右摇摆动画
  15. direction = 1; // 摇摆方向
  16. animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
  17. player1;
  18. player2;
  19. deviceDetailCSS3D;
  20. playerStartClickTime1 = new Date().getTime();
  21. playerStartClickTime2 = new Date().getTime();
  22. fmClock = new THREE.Clock();
  23. mixers: THREE.AnimationMixer | undefined;
  24. appStore = useAppStore();
  25. backDamperOpenMesh;
  26. backDamperClosedMesh;
  27. frontDamperOpenMesh;
  28. frontDamperClosedMesh;
  29. clipActionArr = {
  30. frontDoor: null as unknown as THREE.AnimationAction,
  31. backDoor: null as unknown as THREE.AnimationAction,
  32. };
  33. constructor(model) {
  34. this.model = model;
  35. }
  36. addLight() {
  37. const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
  38. directionalLight.position.set(344, 690, 344);
  39. this.group?.add(directionalLight);
  40. directionalLight.target = this.group as THREE.Object3D;
  41. const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
  42. pointLight2.position.set(-4, 10, 1.8);
  43. pointLight2.shadow.bias = 0.05;
  44. this.group?.add(pointLight2);
  45. const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
  46. pointLight3.position.set(-0.5, -0.5, 0.75);
  47. pointLight3.shadow.bias = 0.05;
  48. this.group?.add(pointLight3);
  49. // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 150);
  50. // pointLight4.position.set(4.3, 1, -0.9);
  51. // pointLight4.shadow.bias = 0.05;
  52. // this.group?.add(pointLight4);
  53. // const pointLight5 = new THREE.PointLight(0xffeeee, 1, 150);
  54. // pointLight5.position.set(4.3, 1, -0.9);
  55. // pointLight5.shadow.bias = 0.05;
  56. // this.group?.add(pointLight5);
  57. // const pointLight6 = new THREE.PointLight(0xffeeee, 1, 150);
  58. // pointLight6.position.set(-4.4, 1, -0.9);
  59. // pointLight6.shadow.bias = 0.05;
  60. // this.group?.add(pointLight6);
  61. // const pointLightHelper2 = new THREE.PointLightHelper(pointLight2, 1);
  62. // this.model.scene?.add(pointLightHelper2);
  63. // gui.add(pointLight2.position, 'x', -300, 300);
  64. // gui.add(pointLight2.position, 'y', -300, 300);
  65. // gui.add(pointLight2.position, 'z', -300, 300);
  66. // gui.add(pointLight3.position, 'x', -300, 300);
  67. // gui.add(pointLight3.position, 'y', -300, 300);
  68. // gui.add(pointLight3.position, 'z', -300, 300);
  69. }
  70. // 重置摄像头
  71. resetCamera() {
  72. this.model.camera.far = 274;
  73. this.model.orbitControls?.update();
  74. this.model.camera.updateProjectionMatrix();
  75. }
  76. // 设置模型位置
  77. setModalPosition() {
  78. this.group?.scale.set(22, 22, 22);
  79. this.group?.position.set(-20, 20, 9);
  80. }
  81. /* 添加监控数据 */
  82. addMonitorText(selectData) {
  83. if (!this.group) {
  84. return;
  85. }
  86. const textArr = [
  87. {
  88. text: `远程控制自动风门`,
  89. font: 'normal 30px Arial',
  90. color: '#00FF00',
  91. strokeStyle: '#007400',
  92. x: 120,
  93. y: 100,
  94. },
  95. {
  96. text: `巷道径高度(m):`,
  97. font: 'normal 30px Arial',
  98. color: '#00FF00',
  99. strokeStyle: '#007400',
  100. x: 0,
  101. y: 155,
  102. },
  103. {
  104. text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
  105. font: 'normal 30px Arial',
  106. color: '#00FF00',
  107. strokeStyle: '#007400',
  108. x: 290,
  109. y: 155,
  110. },
  111. {
  112. text: `巷道径宽度(m): `,
  113. font: 'normal 30px Arial',
  114. color: '#00FF00',
  115. strokeStyle: '#007400',
  116. x: 0,
  117. y: 215,
  118. },
  119. {
  120. text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
  121. font: 'normal 30px Arial',
  122. color: '#00FF00',
  123. strokeStyle: '#007400',
  124. x: 280,
  125. y: 215,
  126. },
  127. {
  128. text: `故障诊断:`,
  129. font: 'normal 30px Arial',
  130. color: '#00FF00',
  131. strokeStyle: '#007400',
  132. x: 0,
  133. y: 275,
  134. },
  135. {
  136. text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
  137. font: 'normal 30px Arial',
  138. color: '#00FF00',
  139. strokeStyle: '#007400',
  140. x: 280,
  141. y: 275,
  142. },
  143. {
  144. text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
  145. font: 'normal 28px Arial',
  146. color: '#00FF00',
  147. strokeStyle: '#007400',
  148. x: History_Type['type'] == 'remote' ? 80 : 20,
  149. y: 325,
  150. },
  151. ];
  152. //
  153. getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
  154. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  155. textMap.colorSpace = THREE.SRGBColorSpace;
  156. const textMaterial = new THREE.MeshBasicMaterial({
  157. // 关于材质并未讲解 实操即可熟悉 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
  158. map: textMap, // 设置纹理贴图
  159. transparent: true,
  160. side: THREE.FrontSide, // 这里是双面渲染的意思
  161. });
  162. textMaterial.blending = THREE.CustomBlending;
  163. const monitorPlane = this.group.getObjectByName('monitorText');
  164. if (monitorPlane) {
  165. monitorPlane.material = textMaterial;
  166. } else {
  167. const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
  168. const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
  169. planeMesh.name = 'monitorText';
  170. planeMesh.scale.set(0.002, 0.002, 0.002);
  171. planeMesh.position.set(3.685, 0.09, -0.41);
  172. this.group.add(planeMesh);
  173. }
  174. textMap.dispose();
  175. });
  176. }
  177. /** 添加热点 */
  178. drawHots() {
  179. const hotPositions = [
  180. { x: -0.37, y: 0.26, z: -0.32 },
  181. { x: 0.28, y: -0.2, z: -0.43 },
  182. { x: 0.55, y: -0.22, z: -0.38 },
  183. ];
  184. for (let i = 0; i < 3; i++) {
  185. const hotPoint = drawHot(0.1);
  186. const position = hotPositions[i];
  187. hotPoint.scale.set(0.1, 0.1, 0.1);
  188. hotPoint.position.set(position.x, position.y, position.z);
  189. hotPoint.name = 'hotPoint' + i;
  190. this.group?.add(hotPoint);
  191. }
  192. }
  193. /* 风门动画 */
  194. render() {
  195. if (!this.model) {
  196. return;
  197. }
  198. if (this.isLRAnimation && this.group) {
  199. // 左右摇摆动画
  200. if (Math.abs(this.group.rotation.y) >= 0.2) {
  201. this.direction = -this.direction;
  202. this.group.rotation.y += 0.00002 * 30 * this.direction;
  203. } else {
  204. this.group.rotation.y += 0.00002 * 30 * this.direction;
  205. }
  206. }
  207. if (this.mixers && this.fmClock.running) {
  208. this.mixers.update(2);
  209. }
  210. }
  211. /* 点击风窗,风窗全屏 */
  212. mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
  213. this.isLRAnimation = false;
  214. if (this.animationTimer) {
  215. clearTimeout(this.animationTimer);
  216. this.animationTimer = null;
  217. }
  218. // 判断是否点击到视频
  219. intersects.find((intersect) => {
  220. const mesh = intersect.object;
  221. // if (mesh.name === 'player1') {
  222. // if (new Date().getTime() - this.playerStartClickTime1 < 400) {
  223. // // 双击,视频放大
  224. // if (this.player1) {
  225. // this.player1.requestPictureInPicture();
  226. // }
  227. // }
  228. // this.playerStartClickTime1 = new Date().getTime();
  229. // return true;
  230. // } else if (mesh.name === 'player2') {
  231. // if (new Date().getTime() - this.playerStartClickTime2 < 400) {
  232. // // 双击,视频放大
  233. // if (this.player2) {
  234. // this.player2.requestPictureInPicture();
  235. // }
  236. // }
  237. // this.playerStartClickTime2 = new Date().getTime();
  238. // return true;
  239. // } else if (mesh.name.startsWith('hotPoint')) {
  240. // if (this.deviceDetailCSS3D) {
  241. // this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.68, mesh.position.z + 0.02);
  242. // console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
  243. // this.deviceDetailCSS3D.visible = true;
  244. // return true;
  245. // }
  246. // } else {
  247. // if (this.deviceDetailCSS3D) this.deviceDetailCSS3D.visible = false;
  248. // console.log('[ 点击事件 ] >');
  249. // }
  250. return false;
  251. });
  252. }
  253. mouseUpModel() {
  254. // 10s后开始摆动
  255. if (!this.animationTimer && !this.isLRAnimation) {
  256. this.animationTimer = setTimeout(() => {
  257. this.isLRAnimation = true;
  258. }, 10000);
  259. }
  260. }
  261. /* 提取风门序列帧,初始化前后门动画 */
  262. initAnimation() {
  263. const fmGroup = this.group?.getObjectByName('Fm-door');
  264. if (fmGroup) {
  265. const tracks = fmGroup.animations[0].tracks;
  266. const fontTracks: any[] = [],
  267. backTracks: any[] = [];
  268. for (let i = 0; i < tracks.length; i++) {
  269. const track = tracks[i];
  270. if (track.name.startsWith('qianmen')) {
  271. fontTracks.push(track);
  272. } else if (track.name.startsWith('houmen')) {
  273. backTracks.push(track);
  274. }
  275. }
  276. this.mixers = new THREE.AnimationMixer(fmGroup);
  277. const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
  278. const frontClipAction = this.mixers.clipAction(frontDoor, fmGroup);
  279. frontClipAction.clampWhenFinished = true;
  280. frontClipAction.loop = THREE.LoopOnce;
  281. this.clipActionArr.frontDoor = frontClipAction;
  282. const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
  283. const backClipAction = this.mixers.clipAction(backDoor, fmGroup);
  284. backClipAction.clampWhenFinished = true;
  285. backClipAction.loop = THREE.LoopOnce;
  286. this.clipActionArr.backDoor = backClipAction;
  287. }
  288. }
  289. deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
  290. const element = document.getElementById('deviceCard') as HTMLElement;
  291. if (element) {
  292. this.deviceDetailCSS3D = new CSS2DObject(element);
  293. this.deviceDetailCSS3D.name = 'deviceCard';
  294. this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
  295. this.deviceDetailCSS3D.visible = false;
  296. // this.model.scene.add(this.deviceDetailCSS3D);
  297. this.group.add(this.deviceDetailCSS3D);
  298. }
  299. }
  300. // 播放动画
  301. play(handlerState, timeScale = 0.01) {
  302. let handler = () => {};
  303. switch (handlerState) {
  304. case 1: // 打开前门
  305. handler = () => {
  306. this.clipActionArr.frontDoor.paused = true;
  307. this.clipActionArr.frontDoor.reset();
  308. this.clipActionArr.frontDoor.time = 1.2;
  309. this.clipActionArr.frontDoor.timeScale = timeScale;
  310. // this.clipActionArr.frontDoor.clampWhenFinished = true;
  311. this.clipActionArr.frontDoor.play();
  312. this.fmClock.start();
  313. // 显示打开前门文字
  314. if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
  315. if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
  316. };
  317. break;
  318. case 2: // 关闭前门
  319. handler = () => {
  320. this.clipActionArr.frontDoor.paused = true;
  321. this.clipActionArr.frontDoor.reset(); //
  322. this.clipActionArr.frontDoor.time = 4;
  323. this.clipActionArr.frontDoor.timeScale = -timeScale;
  324. // this.clipActionArr.frontDoor.clampWhenFinished = true;
  325. this.clipActionArr.frontDoor.play();
  326. this.fmClock.start();
  327. if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
  328. if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
  329. };
  330. break;
  331. case 3: // 打开后门
  332. handler = () => {
  333. this.clipActionArr.backDoor.paused = true;
  334. this.clipActionArr.backDoor.reset();
  335. this.clipActionArr.backDoor.time = 1.2;
  336. this.clipActionArr.backDoor.timeScale = timeScale;
  337. // this.clipActionArr.backDoor.clampWhenFinished = true;
  338. this.clipActionArr.backDoor.play();
  339. this.fmClock.start();
  340. if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
  341. if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
  342. };
  343. break;
  344. case 4: // 关闭后门
  345. handler = () => {
  346. this.clipActionArr.backDoor.paused = true;
  347. this.clipActionArr.backDoor.reset();
  348. this.clipActionArr.backDoor.time = 4;
  349. this.clipActionArr.backDoor.timeScale = -timeScale;
  350. // this.clipActionArr.backDoor.clampWhenFinished = true;
  351. this.clipActionArr.backDoor.play();
  352. this.fmClock.start();
  353. if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
  354. if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
  355. };
  356. break;
  357. // case 5: // 打开前后门
  358. // handler = () => {
  359. // this.clipActionArr.backDoor.paused = true;
  360. // this.clipActionArr.frontDoor.paused = true;
  361. // this.clipActionArr.frontDoor.reset();
  362. // this.clipActionArr.frontDoor.time = 0;
  363. // this.clipActionArr.frontDoor.timeScale = 0.01;
  364. // this.clipActionArr.frontDoor.clampWhenFinished = true;
  365. // this.clipActionArr.frontDoor.play();
  366. // this.clipActionArr.backDoor.reset();
  367. // this.clipActionArr.backDoor.time = 0;
  368. // this.clipActionArr.backDoor.timeScale = 0.01;
  369. // this.clipActionArr.backDoor.clampWhenFinished = true;
  370. // this.clipActionArr.backDoor.play();
  371. // this.frontClock.start();
  372. // this.backClock.start();
  373. // };
  374. // break;
  375. // case 6: // 关闭前后门
  376. // handler = () => {
  377. // debugger;
  378. // this.clipActionArr.backDoor.paused = true;
  379. // this.clipActionArr.frontDoor.paused = true;
  380. // this.clipActionArr.frontDoor.reset();
  381. // this.clipActionArr.frontDoor.time = 4;
  382. // this.clipActionArr.frontDoor.timeScale = -0.01;
  383. // this.clipActionArr.frontDoor.clampWhenFinished = true;
  384. // this.clipActionArr.frontDoor.play();
  385. // this.clipActionArr.backDoor.reset();
  386. // this.clipActionArr.backDoor.time = 4;
  387. // this.clipActionArr.backDoor.timeScale = -0.01;
  388. // this.clipActionArr.backDoor.clampWhenFinished = true;
  389. // this.clipActionArr.backDoor.play();
  390. // this.frontClock.start();
  391. // this.backClock.start();
  392. // };
  393. // break;
  394. default:
  395. }
  396. handler();
  397. // model.clock.start();
  398. // const honglvdeng = group.getObjectByName('honglvdeng');
  399. // const material = honglvdeng.material;
  400. // setTimeout(() => {
  401. // if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
  402. // material.color = new THREE.Color(0x00ff00);
  403. // } else {
  404. // material.color = new THREE.Color(0xff0000);
  405. // }
  406. // }, 1000);
  407. }
  408. async initCamera(dom1) {
  409. const videoPlayer1 = dom1;
  410. this.player1 = dom1;
  411. let monitorPlane: THREE.Mesh | null = null;
  412. if (!videoPlayer1) {
  413. const textArr = [
  414. {
  415. text: `无信号输入`,
  416. font: 'normal 40px Arial',
  417. color: '#009900',
  418. strokeStyle: '#002200',
  419. x: 170,
  420. y: 40,
  421. },
  422. ];
  423. const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
  424. let textMaterial: THREE.MeshBasicMaterial | null = null;
  425. if (canvas) {
  426. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  427. textMaterial = new THREE.MeshBasicMaterial({
  428. map: textMap, // 设置纹理贴图
  429. transparent: true,
  430. side: THREE.DoubleSide, // 这里是双面渲染的意思
  431. });
  432. textMaterial.blending = THREE.CustomBlending;
  433. const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
  434. monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
  435. textMaterial.dispose();
  436. planeGeometry.dispose();
  437. textMap.dispose();
  438. }
  439. }
  440. const player1 = this.group.getObjectByName('player1');
  441. if (player1) {
  442. this.model.clearMesh(player1);
  443. this.group.remove(player1);
  444. }
  445. const noPlayer1 = this.group.getObjectByName('noPlayer1');
  446. if (noPlayer1) {
  447. this.model.clearMesh(noPlayer1);
  448. this.group.remove(noPlayer1);
  449. }
  450. if (!videoPlayer1 && videoPlayer1 === null) {
  451. if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
  452. const planeMesh = monitorPlane.clone();
  453. planeMesh.name = 'noPlayer1';
  454. planeMesh.scale.set(0.0085, 0.0055, 0.012);
  455. planeMesh.position.set(-3.64, 0.01, -0.41);
  456. this.group?.add(planeMesh.clone());
  457. }
  458. } else if (videoPlayer1) {
  459. try {
  460. const mesh = renderVideo(this.group, videoPlayer1, 'player1');
  461. if (mesh) {
  462. mesh?.scale.set(-0.0275, 0.028, 1);
  463. mesh?.position.set(-3.643, 0.02, -0.4);
  464. mesh.rotation.y = -Math.PI;
  465. this.group.add(mesh);
  466. }
  467. } catch (error) {
  468. console.log('视频信号异常');
  469. }
  470. }
  471. }
  472. mountedThree(playerDom) {
  473. this.group = new THREE.Object3D();
  474. this.group.name = this.modelName;
  475. return new Promise((resolve) => {
  476. this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => {
  477. this.setModalPosition();
  478. // 初始化左右摇摆动画;
  479. this.initAnimation();
  480. // this.drawHots();
  481. this.addLight();
  482. // this.deviceDetailCard();
  483. this.model.animate();
  484. this.backDamperOpenMesh = this.group.getObjectByName('Dampler_open_1');
  485. if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
  486. this.backDamperClosedMesh = this.group.getObjectByName('Damper_Closed_1');
  487. if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
  488. this.frontDamperOpenMesh = this.group.getObjectByName('Damper_Open_2');
  489. if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
  490. this.frontDamperClosedMesh = this.group.getObjectByName('Damper_Closed_2');
  491. if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
  492. resolve(this.model);
  493. this.initCamera(playerDom);
  494. });
  495. });
  496. }
  497. destroy() {
  498. if (this.model) {
  499. if (this.mixers) {
  500. this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
  501. this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
  502. this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
  503. this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
  504. this.mixers.uncacheRoot(this.group);
  505. if (this.model.animations[0]) this.model.animations[0].tracks = [];
  506. }
  507. this.model.clearGroup(this.group);
  508. this.clipActionArr.backDoor = undefined;
  509. this.clipActionArr.frontDoor = undefined;
  510. this.mixers = undefined;
  511. // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
  512. }
  513. }
  514. }
  515. export default Fm1;