gate.threejs.three.ts 18 KB

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