dandaoFc.threejs.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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. addLight = () => {
  29. if (!this.model) return;
  30. const directionalLight = new THREE.DirectionalLight(0xfdffe0, 1);
  31. directionalLight.position.set(-100, -50.0, 144.38);
  32. this.group?.add(directionalLight);
  33. const pointLight2 = new THREE.PointLight(0xffffff, 1.5, 150);
  34. pointLight2.position.set(101, 34, 16);
  35. pointLight2.shadow.bias = 0.05;
  36. this.group.add(pointLight2);
  37. const pointLight3 = new THREE.PointLight(0xffffff, 1.5, 150);
  38. pointLight3.position.set(19, 25, -7);
  39. pointLight3.shadow.bias = 0.05;
  40. this.group.add(pointLight3);
  41. const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 300);
  42. pointLight6.position.set(51, 51, 9);
  43. pointLight6.shadow.bias = 0.05;
  44. this.group.add(pointLight6);
  45. };
  46. // 设置模型位置
  47. setModalPosition() {
  48. this.group?.scale.set(22, 22, 22);
  49. this.group?.position.set(-35, 25, 15);
  50. }
  51. addMonitorText(selectData) {
  52. if (!this.group) {
  53. return;
  54. }
  55. const screenDownText = VENT_PARAM['modalText']
  56. ? VENT_PARAM['modalText']
  57. : History_Type['type'] == 'remote'
  58. ? `国能神东煤炭集团监制`
  59. : '煤炭科学技术研究院有限公司研制';
  60. const screenDownTextX = 120 - (screenDownText.length - 10) * 6;
  61. const textArr = [
  62. {
  63. text: `远程定量调节自动风窗`,
  64. font: 'normal 30px Arial',
  65. color: '#009900',
  66. strokeStyle: '#002200',
  67. x: 110,
  68. y: 90,
  69. },
  70. {
  71. text: `${selectData.OpenDegree || selectData.OpenDegree1 ? '开度值(°)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
  72. font: 'normal 30px Arial',
  73. color: '#009900',
  74. strokeStyle: '#002200',
  75. x: 5,
  76. y: 145,
  77. },
  78. {
  79. text: selectData.OpenDegree
  80. ? Number(`${selectData.OpenDegree}`).toFixed(2)
  81. : selectData.OpenDegree1
  82. ? Number(`${selectData.OpenDegree1}`).toFixed(2)
  83. : selectData.forntArea
  84. ? Number(`${selectData.forntArea}`).toFixed(2)
  85. : '-',
  86. font: 'normal 30px Arial',
  87. color: '#009900',
  88. strokeStyle: '#002200',
  89. x: 330,
  90. y: 145,
  91. },
  92. {
  93. text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态'}:`,
  94. font: 'normal 30px Arial',
  95. color: '#009900',
  96. strokeStyle: '#002200',
  97. x: 5,
  98. y: 200,
  99. },
  100. {
  101. text: `${
  102. selectData.frontRearDP
  103. ? selectData.frontRearDP
  104. : selectData.windSpeed
  105. ? selectData.windSpeed
  106. : selectData.netStatus == '0'
  107. ? '断开'
  108. : '连接'
  109. }`,
  110. font: 'normal 30px Arial',
  111. color: '#009900',
  112. strokeStyle: '#002200',
  113. x: 330,
  114. y: 200,
  115. },
  116. {
  117. text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
  118. font: 'normal 30px Arial',
  119. color: '#009900',
  120. strokeStyle: '#002200',
  121. x: 5,
  122. y: 256,
  123. },
  124. {
  125. text: `${selectData.fWindowM3 ? selectData.fWindowM3 : selectData.nwindownum}`,
  126. font: 'normal 30px Arial',
  127. color: '#009900',
  128. strokeStyle: '#002200',
  129. x: 330,
  130. y: 256,
  131. },
  132. {
  133. text: screenDownText,
  134. font: 'normal 28px Arial',
  135. color: '#009900',
  136. strokeStyle: '#002200',
  137. x: screenDownTextX,
  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. if (this.group) {
  168. this.group.getObjectByName('ddFc')?.children.forEach((obj) => {
  169. if (obj.type === 'Mesh' && ((obj.name && obj.name.startsWith('shanye')) || obj.name.startsWith('FCshanye'))) {
  170. obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
  171. meshArr01.push(obj);
  172. }
  173. });
  174. }
  175. this.windowsActionArr.frontWindow = meshArr01;
  176. }
  177. play(rotationParam, flag) {
  178. if (this.windowsActionArr.frontWindow.length <= 0) {
  179. return;
  180. }
  181. if (flag === 1) {
  182. // 前风窗动画
  183. this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
  184. gsap.to(mesh.rotation, {
  185. y: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
  186. duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.y),
  187. overwrite: true,
  188. });
  189. });
  190. } else if (flag === 0) {
  191. ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
  192. gsap.to(mesh.rotation, {
  193. y: 0,
  194. overwrite: true,
  195. });
  196. });
  197. }
  198. }
  199. /* 点击风窗,风窗全屏 */
  200. mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
  201. this.isLRAnimation = false;
  202. if (this.animationTimer) {
  203. clearTimeout(this.animationTimer);
  204. this.animationTimer = null;
  205. }
  206. // 判断是否点击到视频
  207. intersects.find((intersect) => {
  208. const mesh = intersect.object;
  209. if (mesh.name === 'player1') {
  210. if (new Date().getTime() - this.playerStartClickTime1 < 400) {
  211. // 双击,视频放大
  212. if (this.player1) {
  213. this.player1.requestFullscreen();
  214. }
  215. }
  216. this.playerStartClickTime1 = new Date().getTime();
  217. return true;
  218. }
  219. return false;
  220. });
  221. }
  222. mouseUpModel() {
  223. // 10s后开始摆动
  224. if (!this.animationTimer && !this.isLRAnimation) {
  225. this.animationTimer = setTimeout(() => {
  226. this.isLRAnimation = true;
  227. }, 10000);
  228. }
  229. }
  230. /* 风门动画 */
  231. render() {
  232. if (!this.model) {
  233. return;
  234. }
  235. if (this.isLRAnimation && this.group) {
  236. // 左右摇摆动画
  237. if (Math.abs(this.group.rotation.y) >= 0.2) {
  238. this.direction = -this.direction;
  239. this.group.rotation.y += 0.00002 * 30 * this.direction;
  240. } else {
  241. this.group.rotation.y += 0.00002 * 30 * this.direction;
  242. }
  243. }
  244. }
  245. async initCamera(dom1) {
  246. const videoPlayer1 = dom1;
  247. let monitorPlane: THREE.Mesh | null = null;
  248. const textArr = [
  249. {
  250. text: `无信号输入`,
  251. font: 'normal 40px Arial',
  252. color: '#009900',
  253. strokeStyle: '#002200',
  254. x: 170,
  255. y: 40,
  256. },
  257. ];
  258. const canvas = await getTextCanvas(320, 180, textArr, null);
  259. if (canvas) {
  260. const textMap = new THREE.CanvasTexture(canvas); // 关键一步
  261. const textMaterial = new THREE.MeshBasicMaterial({
  262. map: textMap, // 设置纹理贴图
  263. transparent: true,
  264. side: THREE.DoubleSide, // 这里是双面渲染的意思
  265. });
  266. textMaterial.blending = THREE.CustomBlending;
  267. monitorPlane = this.group?.getObjectByName('noPlayer');
  268. if (monitorPlane) {
  269. monitorPlane.material = textMaterial;
  270. } else {
  271. const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
  272. monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
  273. textMaterial.dispose();
  274. planeGeometry.dispose();
  275. }
  276. }
  277. const videoPlayer = this.group.getObjectByName('player1');
  278. if (videoPlayer) {
  279. this.model.clearMesh(videoPlayer);
  280. this.group.remove(videoPlayer);
  281. }
  282. const noPlayer1 = this.group.getObjectByName('noPlayer1');
  283. if (noPlayer1) {
  284. this.model.clearMesh(noPlayer1);
  285. this.group.remove(noPlayer1);
  286. }
  287. if (!videoPlayer1 && videoPlayer1 === null) {
  288. if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
  289. const planeMesh = monitorPlane.clone();
  290. planeMesh.name = 'noPlayer1';
  291. planeMesh.scale.set(0.011, 0.0053, 0.012);
  292. planeMesh.position.set(-4.3, 0.13, -0.23);
  293. this.group?.add(planeMesh.clone());
  294. }
  295. } else if (videoPlayer1) {
  296. try {
  297. const mesh = renderVideo(this.group, videoPlayer1, 'player1');
  298. if (mesh) {
  299. mesh?.scale.set(0.0382, 0.028, 0.022);
  300. mesh?.position.set(-3.008, 0.148, -0.22);
  301. this.group.add(mesh);
  302. }
  303. } catch (error) {
  304. console.log('视频信号异常');
  305. }
  306. }
  307. }
  308. resetMaterial() {
  309. const fcModal = this.group.getObjectByName('ddFc');
  310. if (fcModal) {
  311. const fengchuangbuxiugang = (fcModal.getObjectByName('FCshanye03') as THREE.Mesh)?.material; // 圈;
  312. (fengchuangbuxiugang as THREE.MeshStandardMaterial).color.set(0xb3b3b3);
  313. (fengchuangbuxiugang as THREE.MeshStandardMaterial).roughness = 0.36;
  314. (fengchuangbuxiugang as THREE.MeshStandardMaterial).envMapIntensity = 0.92;
  315. // const stainlessSteel_light = (fcModal.getObjectByName('Line12241') as THREE.Mesh)?.material; // 框;
  316. // const fluorescent_green = (fcModal.getObjectByName('对象276') as THREE.Mesh)?.material; // fluorescent_green;
  317. // const fluorescent_green1 = (fcModal.getObjectByName('Box770') as THREE.Mesh)?.material; // 23 - Default;
  318. // const wire = (fcModal.getObjectByName('对象281') as THREE.Mesh)?.material; // wire_028149177;
  319. // const net = (fcModal.getObjectByName('Plane9230') as THREE.Mesh)?.material; // wire_028149177;
  320. // const stainlesssteel_blue = (fcModal.getObjectByName('Blades08') as THREE.Mesh)?.material; // wire_028149177;
  321. // (stainlessSteel_light as THREE.MeshStandardMaterial).color.set(0x9e9e9e);
  322. // (stainlessSteel_light as THREE.MeshStandardMaterial).roughness = 0.26;
  323. // (stainlessSteel_light as THREE.MeshStandardMaterial).envMapIntensity = 0.92;
  324. // (fluorescent_green as THREE.MeshStandardMaterial).color.set(0x00fff2);
  325. // (fluorescent_green as THREE.MeshStandardMaterial).envMapIntensity = 1.5;
  326. // //
  327. // (fluorescent_green1 as THREE.MeshStandardMaterial).color.set(0x00fff2);
  328. // (fluorescent_green1 as THREE.MeshStandardMaterial).envMapIntensity = 1.5;
  329. // (wire as THREE.MeshStandardMaterial).color.set(0x38e4ff);
  330. // (wire as THREE.MeshStandardMaterial).envMapIntensity = 2;
  331. // (net as THREE.MeshStandardMaterial).color.set(0xcfcfcf);
  332. // (stainlesssteel_blue as THREE.MeshStandardMaterial).color.set(0xababab);
  333. // (stainlesssteel_blue as THREE.MeshStandardMaterial).roughness = 0.45;
  334. }
  335. }
  336. mountedThree(playerDom) {
  337. return new Promise((resolve) => {
  338. this.model.setGLTFModel('ddFc').then((gltf) => {
  339. const fcModal = gltf[0];
  340. fcModal.name = 'ddFc';
  341. this.group?.add(fcModal);
  342. this.resetMaterial();
  343. this.setModalPosition();
  344. this.initAnimation();
  345. this.addLight();
  346. resolve(null);
  347. });
  348. });
  349. }
  350. destroy() {
  351. this.model.clearGroup(this.group);
  352. this.windowsActionArr.frontWindow = undefined;
  353. this.model = null;
  354. this.group = null;
  355. }
  356. }
  357. export default singleWindow;