dandaoFc.threejs.ts 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. import * as THREE from 'three';
  2. import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
  3. import gsap from 'gsap';
  4. class singleWindow {
  5. model;
  6. modelName = 'ddFc';
  7. group: THREE.Object3D = new THREE.Object3D();
  8. animationTimer;
  9. isLRAnimation = true;
  10. direction = 1;
  11. windowsActionArr = {
  12. frontWindow: [],
  13. };
  14. player1;
  15. player2;
  16. playerStartClickTime1 = new Date().getTime();
  17. constructor(model) {
  18. this.model = model;
  19. // this.group.name = 'ddFc';
  20. }
  21. // // 重置摄像头
  22. // const resetCamera = () => {
  23. // this.model.camera.position.set(30.328, 58.993, 148.315);
  24. // this.model.camera.rotation.set(-27.88, 14.35, 7.47);
  25. // this.model.orbitControls?.update();
  26. // this.model.camera.updateProjectionMatrix();
  27. // };
  28. // 设置模型位置
  29. setModalPosition() {
  30. this.group?.scale.set(22, 22, 22);
  31. this.group?.position.set(-35, 25, 15);
  32. }
  33. addMonitorText(selectData) {
  34. if (!this.group) {
  35. return;
  36. }
  37. const textArr = [
  38. {
  39. text: `远程定量调节自动风窗`,
  40. font: 'normal 30px Arial',
  41. color: '#009900',
  42. strokeStyle: '#002200',
  43. x: 110,
  44. y: 90,
  45. },
  46. {
  47. text: `过风量(m³/min):`,
  48. font: 'normal 30px Arial',
  49. color: '#009900',
  50. strokeStyle: '#002200',
  51. x: 5,
  52. y: 145,
  53. },
  54. {
  55. text: selectData.fWindowM3 ? Number(`${selectData.fWindowM3}`).toFixed(0) : '-',
  56. font: 'normal 30px Arial',
  57. color: '#009900',
  58. strokeStyle: '#002200',
  59. x: 225,
  60. y: 145,
  61. },
  62. {
  63. text: `${selectData.maxarea == 100 ? '当前开度(%):' : '过风面积(m2):'} `,
  64. font: 'normal 30px Arial',
  65. color: '#009900',
  66. strokeStyle: '#002200',
  67. x: 5,
  68. y: 200,
  69. },
  70. {
  71. text: `${selectData.forntArea ? selectData.forntArea : '-'}`,
  72. font: 'normal 30px Arial',
  73. color: '#009900',
  74. strokeStyle: '#002200',
  75. x: 200,
  76. y: 200,
  77. },
  78. {
  79. text: `风窗压差(Pa):`,
  80. font: 'normal 30px Arial',
  81. color: '#009900',
  82. strokeStyle: '#002200',
  83. x: 5,
  84. y: 256,
  85. },
  86. {
  87. text: `${selectData.frontRearDP ? selectData.frontRearDP : '-'}`,
  88. font: 'normal 30px Arial',
  89. color: '#009900',
  90. strokeStyle: '#002200',
  91. x: 200,
  92. y: 256,
  93. },
  94. {
  95. text: `调节精度:`,
  96. font: 'normal 30px Arial',
  97. color: '#009900',
  98. strokeStyle: '#002200',
  99. x: 330,
  100. y: 145,
  101. },
  102. {
  103. // text: `1% FS`,
  104. text: `-`,
  105. font: 'normal 30px Arial',
  106. color: '#009900',
  107. strokeStyle: '#002200',
  108. x: 440,
  109. y: 145,
  110. },
  111. {
  112. text: `调节范围:`,
  113. font: 'normal 30px Arial',
  114. color: '#009900',
  115. strokeStyle: '#002200',
  116. x: 330,
  117. y: 200,
  118. },
  119. {
  120. text:
  121. selectData.maxarea && selectData.maxarea !== '-'
  122. ? selectData.maxarea == 100
  123. ? `0~${selectData.maxarea}`
  124. : `0~${selectData.maxarea}`
  125. : '-',
  126. font: 'normal 30px Arial',
  127. color: '#009900',
  128. strokeStyle: '#002200',
  129. x: 470,
  130. y: 200,
  131. },
  132. {
  133. text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
  134. font: 'normal 28px Arial',
  135. color: '#009900',
  136. strokeStyle: '#002200',
  137. x: History_Type['type'] == 'remote' ? 120 : 60,
  138. y: 302,
  139. },
  140. ];
  141. getTextCanvas(726, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
  142. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  143. const textMaterial = new THREE.MeshBasicMaterial({
  144. // 关于材质并未讲解 实操即可熟悉 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
  145. map: textMap, // 设置纹理贴图
  146. transparent: true,
  147. side: THREE.DoubleSide, // 这里是双面渲染的意思
  148. });
  149. textMap.dispose();
  150. textMaterial.blending = THREE.CustomBlending;
  151. const monitorPlane = this.group?.getObjectByName('monitorText');
  152. if (monitorPlane) {
  153. monitorPlane.material = textMaterial;
  154. } else {
  155. const planeGeometry = new THREE.PlaneGeometry(570, 346); // 平面3维几何体PlaneGeometry
  156. const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
  157. planeMesh.name = 'monitorText';
  158. planeMesh.scale.set(0.0025, 0.003, 0.002);
  159. planeMesh.position.set(3.71, -0.042, -0.23);
  160. this.group?.add(planeMesh);
  161. }
  162. });
  163. }
  164. /* 提取风门序列帧,初始化前后门动画 */
  165. initAnimation() {
  166. const meshArr01: THREE.Object3D[] = [];
  167. this.group.getObjectByName('ddFc')?.children.forEach((obj) => {
  168. if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
  169. obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
  170. meshArr01.push(obj);
  171. }
  172. });
  173. this.windowsActionArr.frontWindow = meshArr01;
  174. }
  175. play(rotationParam, flag) {
  176. if (this.windowsActionArr.frontWindow.length <= 0) {
  177. return;
  178. }
  179. if (flag === 1) {
  180. // 前风窗动画
  181. this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
  182. gsap.to(mesh.rotation, {
  183. y: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
  184. duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.y),
  185. overwrite: true,
  186. });
  187. });
  188. } else if (flag === 0) {
  189. ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
  190. gsap.to(mesh.rotation, {
  191. y: 0,
  192. overwrite: true,
  193. });
  194. });
  195. }
  196. }
  197. /* 点击风窗,风窗全屏 */
  198. mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
  199. this.isLRAnimation = false;
  200. if (this.animationTimer) {
  201. clearTimeout(this.animationTimer);
  202. this.animationTimer = null;
  203. }
  204. // 判断是否点击到视频
  205. intersects.find((intersect) => {
  206. const mesh = intersect.object;
  207. if (mesh.name === 'player1') {
  208. if (new Date().getTime() - this.playerStartClickTime1 < 400) {
  209. // 双击,视频放大
  210. if (this.player1) {
  211. this.player1.requestFullscreen();
  212. }
  213. }
  214. this.playerStartClickTime1 = new Date().getTime();
  215. return true;
  216. }
  217. return false;
  218. });
  219. }
  220. mouseUpModel() {
  221. // 10s后开始摆动
  222. if (!this.animationTimer && !this.isLRAnimation) {
  223. this.animationTimer = setTimeout(() => {
  224. this.isLRAnimation = true;
  225. }, 10000);
  226. }
  227. }
  228. /* 风门动画 */
  229. render() {
  230. if (!this.model) {
  231. return;
  232. }
  233. if (this.isLRAnimation && this.group) {
  234. // 左右摇摆动画
  235. if (Math.abs(this.group.rotation.y) >= 0.2) {
  236. this.direction = -this.direction;
  237. this.group.rotation.y += 0.00002 * 30 * this.direction;
  238. } else {
  239. this.group.rotation.y += 0.00002 * 30 * this.direction;
  240. }
  241. }
  242. }
  243. async initCamera(dom1) {
  244. const videoPlayer1 = dom1;
  245. let monitorPlane: THREE.Mesh | null = null;
  246. const textArr = [
  247. {
  248. text: `无信号输入`,
  249. font: 'normal 40px Arial',
  250. color: '#009900',
  251. strokeStyle: '#002200',
  252. x: 170,
  253. y: 40,
  254. },
  255. ];
  256. const canvas = await getTextCanvas(320, 180, textArr, null);
  257. if (canvas) {
  258. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  259. const textMaterial = new THREE.MeshBasicMaterial({
  260. map: textMap, // 设置纹理贴图
  261. transparent: true,
  262. side: THREE.DoubleSide, // 这里是双面渲染的意思
  263. });
  264. textMaterial.blending = THREE.CustomBlending;
  265. monitorPlane = this.group?.getObjectByName('noPlayer');
  266. if (monitorPlane) {
  267. monitorPlane.material = textMaterial;
  268. } else {
  269. const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
  270. monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
  271. textMaterial.dispose();
  272. planeGeometry.dispose();
  273. }
  274. }
  275. const videoPlayer = this.group.getObjectByName('player1');
  276. if (videoPlayer) {
  277. this.model.clearMesh(videoPlayer);
  278. this.group.remove(videoPlayer);
  279. }
  280. const noPlayer1 = this.group.getObjectByName('noPlayer1');
  281. if (noPlayer1) {
  282. this.model.clearMesh(noPlayer1);
  283. this.group.remove(noPlayer1);
  284. }
  285. if (!videoPlayer1 && videoPlayer1 === null) {
  286. if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
  287. const planeMesh = monitorPlane.clone();
  288. planeMesh.name = 'noPlayer1';
  289. planeMesh.scale.set(0.011, 0.0053, 0.012);
  290. planeMesh.position.set(-4.3, 0.13, -0.23);
  291. this.group?.add(planeMesh.clone());
  292. }
  293. } else if (videoPlayer1) {
  294. try {
  295. const mesh = renderVideo(this.group, videoPlayer1, 'player1');
  296. if (mesh) {
  297. mesh?.scale.set(0.0382, 0.028, 0.022);
  298. mesh?.position.set(-3.008, 0.148, -0.22);
  299. this.group.add(mesh);
  300. }
  301. } catch (error) {
  302. console.log('视频信号异常');
  303. }
  304. }
  305. }
  306. mountedThree(playerDom) {
  307. return new Promise((resolve) => {
  308. this.model.setGLTFModel(['ddFc'], this.group).then(() => {
  309. this.setModalPosition();
  310. this.initAnimation();
  311. resolve(null);
  312. this.initCamera(playerDom);
  313. });
  314. });
  315. }
  316. destroy() {
  317. this.model.clearGroup(this.group);
  318. this.windowsActionArr.frontWindow = undefined;
  319. this.model = null;
  320. this.group = null;
  321. }
  322. }
  323. export default singleWindow;