【前端】智能库房综合管理系统前端项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

943 lines
28 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. // 从这里开始
  2. var h1 = null;
  3. var h2 = null;
  4. var oldtransformNodex = null;
  5. var oldtransformNodeOther = null;
  6. var drag = null;
  7. var notmoveGroup = null;
  8. var movedGroup = null;
  9. var movesingle = false;
  10. var dynamicTexture = null;
  11. var dynamicTexture2 = null;
  12. var dynamicTexture3 = null;
  13. var dynamicTexture4 = null;
  14. var PointerOverYangan = null;
  15. var show = 50;
  16. var showdd = 50;
  17. var deviceData = [];
  18. BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
  19. if (document.getElementById("customLoadingScreenDiv")) {
  20. document.getElementById("customLoadingScreenDiv").style.display = "initial";
  21. // 给vue页面传值,加载完成之前
  22. parent.getIframeLoading("true")
  23. return;
  24. }
  25. this._loadingDiv = document.createElement("div");
  26. //this._loadingDiv.style.height = '1750px';
  27. this._loadingDiv.id = "customLoadingScreenDiv";
  28. thecss = "lohingifpc";
  29. thecss2 = "zcpc";
  30. this._loadingDiv.innerHTML =
  31. "<div class='oka'><div class='" +
  32. thecss +
  33. "'><image src='./logok.gif' class='jiazaiimg'/></div><div class='" +
  34. thecss2 +
  35. "'>由 <image class='feitimg' src='./img/yxlogo.png'/> 阅行客 提供技术支持!</div></div>";
  36. this._resizeLoadingUI();
  37. window.addEventListener("resize", this._resizeLoadingUI);
  38. document.body.appendChild(this._loadingDiv);
  39. };
  40. BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
  41. show = 50;
  42. document.getElementById("customLoadingScreenDiv").style.display = "none";
  43. document.getElementById("customLoadingScreenDiv_first").style.display =
  44. "none";
  45. document.title = "阅览室";
  46. //scene.getMaterialByName("材质.023").roughness = 0;
  47. var camera07 = scene.getTransformNodeByName("Camera8");
  48. var camera08 = scene.getTransformNodeByName("Camera9");
  49. camera07.name = "camera07";
  50. camera08.name = "camera08";
  51. camera07.nameID = "YLS_MO_CAM_001";
  52. camera08.nameID = "YLS_MO_CAM_002";
  53. camera07.baojing = false;
  54. camera08.baojing = false;
  55. var yangan06 = scene.getTransformNodeByName("yangan_5");
  56. yangan06.name = "yangan06";
  57. yangan06.nameID = "YLS_MO_OAO_001";
  58. yangan06.wendu = 0;
  59. yangan06.sidu = 0;
  60. yangan06.canshow = true;
  61. var prepareGroupButtonOther = function(transformNodex, color) {
  62. var mesheses = null;
  63. if (transformNodex.getClassName() == "TransformNode") {
  64. mesheses = transformNodex.getChildMeshes(false);
  65. } else {
  66. mesheses = [];
  67. mesheses.push(transformNodex);
  68. }
  69. for (var i = 0; i < mesheses.length; i++) {
  70. mesheses[i].actionManager = new BABYLON.ActionManager(scene);
  71. var theScaling = mesheses[i].scaling;
  72. if (true) {
  73. try {
  74. //mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x, theScaling.y, theScaling.z), 100));
  75. // 初始化数据 温度/湿度
  76. deviceData.forEach(item => {
  77. if (item.id === transformNodex.nameID) {
  78. transformNodex.wendu = item.wendu;
  79. transformNodex.sidu = item.sidu;
  80. transformNodex.baojing = item.alarmState;
  81. }
  82. });
  83. mesheses[i].actionManager.registerAction(
  84. new BABYLON.ExecuteCodeAction(
  85. {
  86. trigger: BABYLON.ActionManager.OnPointerOverTrigger,
  87. parameter: ""
  88. },
  89. function() {
  90. clickbegin = true;
  91. if (true) {
  92. try {
  93. if (oldtransformNodeOther != null) {
  94. oldtransformNodeOther.removeBehavior(drag);
  95. var mesheses2 = null;
  96. if (
  97. oldtransformNodeOther.getClassName() == "TransformNode"
  98. ) {
  99. mesheses2 = oldtransformNodeOther.getChildMeshes(false);
  100. } else {
  101. mesheses2 = [];
  102. mesheses2.push(oldtransformNodeOther);
  103. }
  104. for (var i = 0; i < mesheses2.length; i++) {
  105. try {
  106. h2.removeMesh(mesheses2[i]);
  107. } catch (error) {
  108. // alert(error)
  109. }
  110. }
  111. }
  112. oldtransformNodeOther = transformNodex;
  113. //transformNodex.addBehavior(drag);
  114. var mesheses3 = null;
  115. if (transformNodex.getClassName() == "TransformNode") {
  116. mesheses3 = transformNodex.getChildMeshes(false);
  117. } else {
  118. mesheses3 = [];
  119. mesheses3.push(transformNodex);
  120. }
  121. for (var i = 0; i < mesheses3.length; i++) {
  122. try {
  123. if (transformNodex.baojing == true) {
  124. h2.addMesh(mesheses3[i], new BABYLON.Color3(1, 0, 0));
  125. } else {
  126. h2.addMesh(mesheses3[i], color);
  127. }
  128. } catch (error) {
  129. // alert(error)
  130. }
  131. }
  132. } catch (error) {
  133. // alert(error)
  134. }
  135. clickbegin = false;
  136. }
  137. if (transformNodex.name.indexOf("yangan") >= 0) {
  138. console.log(transformNodex.name);
  139. PointerOverYangan = transformNodex.name;
  140. if (transformNodex.baojing == true) {
  141. var location = transformNodex.absolutePosition;
  142. var xd = scene.getMeshByName("tapred");
  143. // x = x-0.6;; y = y+0.3 z=z+0.5
  144. xd.position = new BABYLON.Vector3(
  145. location.x - 0.6,
  146. location.y + 0.9,
  147. location.z + 0.5
  148. );
  149. var font_size = 36;
  150. var font = "bold " + font_size + "px Arial";
  151. dynamicTexture3.drawText(
  152. transformNodex.wendu + "°C",
  153. null,
  154. null,
  155. font,
  156. "#FFFFFF",
  157. "#000000",
  158. true
  159. );
  160. dynamicTexture4.drawText(
  161. transformNodex.sidu + "%",
  162. null,
  163. null,
  164. font,
  165. "#FFFFFF",
  166. "#000000",
  167. true
  168. );
  169. if(transformNodex.canshow == true){
  170. xd.setEnabled(true);
  171. }
  172. } else {
  173. var location = transformNodex.absolutePosition;
  174. var xd = scene.getMeshByName("tapblue");
  175. // x = x-0.6;; y = y+0.3 z=z+0.5
  176. xd.position = new BABYLON.Vector3(
  177. location.x - 0.6,
  178. location.y + 0.9,
  179. location.z + 0.5
  180. );
  181. var font_size = 36;
  182. var font = "bold " + font_size + "px Arial";
  183. dynamicTexture.drawText(
  184. transformNodex.wendu + "°C",
  185. null,
  186. null,
  187. font,
  188. "#FFFFFF",
  189. "#000000",
  190. true
  191. );
  192. dynamicTexture2.drawText(
  193. transformNodex.sidu + "%",
  194. null,
  195. null,
  196. font,
  197. "#FFFFFF",
  198. "#000000",
  199. true
  200. );
  201. if(transformNodex.canshow == true){
  202. xd.setEnabled(true);
  203. }
  204. }
  205. }
  206. }
  207. )
  208. );
  209. mesheses[i].actionManager.registerAction(
  210. new BABYLON.ExecuteCodeAction(
  211. {
  212. trigger: BABYLON.ActionManager.OnPointerOutTrigger,
  213. parameter: ""
  214. },
  215. function() {
  216. var mesheses2 = null;
  217. if (transformNodex.getClassName() == "TransformNode") {
  218. mesheses2 = transformNodex.getChildMeshes(false);
  219. } else {
  220. mesheses2 = [];
  221. mesheses2.push(transformNodex);
  222. }
  223. for (var i = 0; i < mesheses2.length; i++) {
  224. try {
  225. h2.removeMesh(mesheses2[i]);
  226. } catch (error) {
  227. // alert(error)
  228. }
  229. }
  230. if (transformNodex.name.indexOf("yangan") >= 0) {
  231. if (transformNodex.baojing == true) {
  232. var location = transformNodex.absolutePosition;
  233. var xd = scene.getMeshByName("tapred");
  234. // x = x-0.6;; y = y+0.3 z=z+0.5
  235. xd.setEnabled(false);
  236. } else {
  237. var location = transformNodex.absolutePosition;
  238. var xd = scene.getMeshByName("tapblue");
  239. // x = x-0.6;; y = y+0.3 z=z+0.5
  240. xd.setEnabled(false);
  241. }
  242. }
  243. }
  244. )
  245. );
  246. //mesheses[i].actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesheses[i], "scaling", new BABYLON.Vector3(theScaling.x * 1.01, theScaling.y * 1.01, theScaling.z * 1.01), 100));
  247. } catch (error) {
  248. //alert(error)
  249. }
  250. }
  251. var clickbegin = false;
  252. mesheses[i].actionManager.registerAction(
  253. new BABYLON.ExecuteCodeAction(
  254. {
  255. trigger: BABYLON.ActionManager.OnPickTrigger,
  256. parameter: ""
  257. },
  258. function() {
  259. cameraClick(transformNodex);
  260. }
  261. )
  262. );
  263. }
  264. };
  265. prepareGroupButtonOther(camera07, new BABYLON.Color3(0, 0, 1));
  266. prepareGroupButtonOther(camera08, new BABYLON.Color3(0, 0, 1));
  267. prepareGroupButtonOther(yangan06, new BABYLON.Color3(0, 0, 1));
  268. //修改贴图
  269. var bluexMat = new BABYLON.PBRMaterial("bluex", scene);
  270. var tempddxa = new BABYLON.Texture("./asset/blue.png", scene);
  271. var tempddxb = new BABYLON.Texture("./asset/blue.png", scene);
  272. tempddxa.hasAlpha = true;
  273. tempddxa.hasAlpha = true;
  274. tempddxa.uAng = (180 * Math.PI) / 180;
  275. tempddxb.uAng = (180 * Math.PI) / 180;
  276. bluexMat.useAlphaFromAlbedoTexture = true;
  277. bluexMat.albedoTexture = tempddxa;
  278. bluexMat.reflectionColor = new BABYLON.Color3(0, 0, 0);
  279. bluexMat.lightmapTexture = tempddxb;
  280. scene.getMeshByName("平面_1").material = bluexMat;
  281. var redMat = new BABYLON.PBRMaterial("redMat", scene);
  282. var tempddx2 = new BABYLON.Texture("./asset/red.png", scene);
  283. var tempddx3 = new BABYLON.Texture("./asset/red.png", scene);
  284. tempddx2.hasAlpha = true;
  285. tempddx3.hasAlpha = true;
  286. tempddx2.uAng = (180 * Math.PI) / 180;
  287. tempddx3.uAng = (180 * Math.PI) / 180;
  288. redMat.useAlphaFromAlbedoTexture = true;
  289. redMat.reflectionColor = new BABYLON.Color3(0, 0, 0);
  290. //redMat.emissiveTexture =tempddx2;
  291. redMat.albedoTexture = tempddx2;
  292. redMat.lightmapTexture = tempddx3;
  293. scene.getMeshByName("平面_1_2").material = redMat;
  294. var font_size = 48;
  295. var font = "bold " + font_size + "px Arial";
  296. //Set height for plane
  297. var planeHeight = 3;
  298. //Set height for dynamic texture
  299. var DTHeight = 1.5 * font_size; //or set as wished
  300. //Calcultae ratio
  301. var ratio = planeHeight / DTHeight;
  302. //Set text
  303. var text = "10";
  304. //Use a temporay dynamic texture to calculate the length of the text on the dynamic texture canvas
  305. var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene);
  306. var tmpctx = temp.getContext();
  307. tmpctx.font = font;
  308. var DTWidth = tmpctx.measureText(text).width + 58;
  309. //Calculate width the plane has to be
  310. var planeWidth = DTWidth * ratio;
  311. //Create dynamic texture and write the text
  312. dynamicTexture = new BABYLON.DynamicTexture(
  313. "DynamicTexture",
  314. { width: DTWidth, height: DTHeight },
  315. scene,
  316. false
  317. );
  318. var mat = new BABYLON.StandardMaterial("mat", scene);
  319. //var mat = new BABYLON.PBRMaterial("mat", scene);
  320. //mat.albedoColor = new BABYLON.Color4(0.7968, 0.3685, 0.1105, 1);
  321. mat.disableLighting = true;
  322. mat.emissiveTexture = dynamicTexture;
  323. mat.reflectivityColor = new BABYLON.Color3(0, 0, 0);
  324. dynamicTexture.uAng = (166.39 * Math.PI) / 180;
  325. //Create plane and set dynamic texture as material
  326. //var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene);
  327. var vxd = scene.getMeshByName("平面_2"); //blue
  328. vxd.material = mat;
  329. //平面3
  330. dynamicTexture2 = new BABYLON.DynamicTexture(
  331. "DynamicTexture2",
  332. { width: DTWidth, height: DTHeight },
  333. scene,
  334. false
  335. );
  336. //var mat = new BABYLON.StandardMaterial("mat", scene);
  337. //mat.disableLighting = true;
  338. var mat2 = new BABYLON.StandardMaterial("mat2", scene);
  339. //mat.albedoColor = new BABYLON.Color4(0.7968, 0.3685, 0.1105, 1);
  340. mat2.disableLighting = true;
  341. //mat2.ambientTexture = dynamicTexture2;
  342. mat2.emissiveTexture = dynamicTexture2;
  343. mat2.reflectivityColor = new BABYLON.Color3(0, 0, 0);
  344. dynamicTexture2.uAng = (166.39 * Math.PI) / 180;
  345. //Create plane and set dynamic texture as material
  346. //var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene);
  347. var vxd2 = scene.getMeshByName("平面_3");
  348. vxd2.material = mat2;
  349. //-------------------------------------------------------------------------------------
  350. dynamicTexture3 = new BABYLON.DynamicTexture(
  351. "DynamicTexture3",
  352. { width: DTWidth, height: DTHeight },
  353. scene,
  354. false
  355. );
  356. //var mat = new BABYLON.StandardMaterial("mat", scene);
  357. //mat.disableLighting = true;
  358. var mat3 = new BABYLON.StandardMaterial("mat3", scene);
  359. //mat.albedoColor = new BABYLON.Color4(0.7968, 0.3685, 0.1105, 1);
  360. mat3.disableLighting = true;
  361. //mat2.ambientTexture = dynamicTexture2;
  362. mat3.emissiveTexture = dynamicTexture3;
  363. mat3.reflectivityColor = new BABYLON.Color3(0, 0, 0);
  364. dynamicTexture3.uAng = (166.39 * Math.PI) / 180;
  365. //Create plane and set dynamic texture as material
  366. //var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene);
  367. var vxd3 = scene.getMeshByName("平面_2_2"); //blue
  368. vxd3.material = mat3;
  369. //-------------------------------------------------------------------------------------
  370. dynamicTexture4 = new BABYLON.DynamicTexture(
  371. "dynamicTexture4",
  372. { width: DTWidth, height: DTHeight },
  373. scene,
  374. false
  375. );
  376. //var mat = new BABYLON.StandardMaterial("mat", scene);
  377. //mat.disableLighting = true;
  378. var mat4 = new BABYLON.StandardMaterial("mat4", scene);
  379. //mat.albedoColor = new BABYLON.Color4(0.7968, 0.3685, 0.1105, 1);
  380. mat4.disableLighting = true;
  381. //mat2.ambientTexture = dynamicTexture2;
  382. mat4.emissiveTexture = dynamicTexture4;
  383. mat4.reflectivityColor = new BABYLON.Color3(0, 0, 0);
  384. dynamicTexture4.uAng = (166.39 * Math.PI) / 180;
  385. //Create plane and set dynamic texture as material
  386. //var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene);
  387. var vxd4 = scene.getMeshByName("平面_3_2");
  388. vxd4.material = mat4;
  389. scene.getMeshByName("tapblue").setEnabled(false);
  390. scene.getMeshByName("tapred").setEnabled(false);
  391. var light = new BABYLON.HemisphericLight(
  392. "HemiLight",
  393. new BABYLON.Vector3(0, 1, 0),
  394. scene
  395. );
  396. light.intensity = 2;
  397. light.diffuse = new BABYLON.Color3(0.92, 0.92, 0.92);
  398. scene.getMaterialByName("cover_label.001").metallic = 0.36;
  399. scene.getMaterialByName("cover_label.001").albedoColor = new BABYLON.Color3(
  400. 1,
  401. 1,
  402. 1
  403. );
  404. scene.getMaterialByName("Desk.001").metallic = 0.8;
  405. scene.getMaterialByName("Desk.001").roughness = 0.72;
  406. scene.getMaterialByName("Desk.005").metallic = 0.8;
  407. scene.getMaterialByName("Desk.005").roughness = 0.72;
  408. scene.getMaterialByName("Desk.006").metallic = 0.8;
  409. scene.getMaterialByName("Desk.006").roughness = 0.72;
  410. var plane = BABYLON.MeshBuilder.CreatePlane(
  411. "plane",
  412. { width: 10, height: 10 },
  413. scene
  414. );
  415. plane.position = new BABYLON.Vector3(0.11, 1.93, -0.28);
  416. plane.rotation = new BABYLON.Vector3((90 * Math.PI) / 180, 0, 0);
  417. plane.scaling = new BABYLON.Vector3(1.2, 0.8, 1);
  418. // 墙体添加透明度
  419. scene.getMaterialByName("cover_label.001").alpha = 0.7;
  420. scene.getMaterialByName("cover_label.001").transparencyMode=2; //ALPHABLEND
  421. // 给vue页面传值,加载完成之后
  422. parent.getIframeLoading("false")
  423. };
  424. // createScene function that creates and return the scene
  425. var createScene = function() {
  426. engine.displayLoadingUI();
  427. // create a basic BJS Scene object
  428. var scene = new BABYLON.Scene(engine);
  429. // scene.debugLayer.show();
  430. var camera = new BABYLON.ArcRotateCamera(
  431. "Camera",
  432. 0,
  433. 0,
  434. 5,
  435. new BABYLON.Vector3(0, -1, 0),
  436. scene
  437. );
  438. camera.setTarget(new BABYLON.Vector3(0, 3.5, 0));
  439. camera.attachControl(canvas, true);
  440. camera.lowerRadiusLimit = 2.0; // 这里是最大的位置,值越大,物体越小
  441. camera.upperRadiusLimit = 40;
  442. camera.radius = 14.888;
  443. camera.alpha = (Math.PI * -223.57) / 180;
  444. camera.beta = (Math.PI * 66) / 180;
  445. camera.inertia = 0.1; // 缩放的快慢
  446. camera.useAutoRotationBehavior = true; // 自动旋转
  447. camera.panningDistanceLimit = 2; //平移半径
  448. camera.panningInertia = 0;
  449. camera.autoTransitionRange = 1;
  450. camera.pinchToPanMaxDistance = 0.1;
  451. camera.pinchDeltaPercentage = 0.001;
  452. camera.useAutoRotationBehavior = false;
  453. scene.activeCamera = camera;
  454. // 改变场景背景颜色 - 背景颜色opacity值设为0,达到透明背景的效果
  455. scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
  456. scene.activeCamera.useInputToRestoreState = true;
  457. var camera1_status = scene.activeCamera.storeState();
  458. var assetsManager = new BABYLON.AssetsManager(scene);
  459. var meshTask = assetsManager.addMeshTask(
  460. "skull task",
  461. "",
  462. "asset/",
  463. "c3.glb"
  464. );
  465. meshTask.onSuccess = function(task) {
  466. task.loadedMeshes[0].scaling = new BABYLON.Vector3(0.4, 0.4, -0.4);
  467. task.loadedMeshes[0].position = new BABYLON.Vector3(0.0, 2, 0);
  468. };
  469. meshTask.onError = function(task, message, exception) {
  470. console.log(message, exception);
  471. };
  472. var meshTask_tapblue = assetsManager.addMeshTask(
  473. "skull task",
  474. "",
  475. "asset/",
  476. "tapBlue.glb"
  477. );
  478. meshTask_tapblue.onSuccess = function(task) {
  479. task.loadedMeshes[0].scaling = new BABYLON.Vector3(0.4, 0.4, -0.4);
  480. task.loadedMeshes[0].position = new BABYLON.Vector3(0, 0, 0);
  481. //-2.5,3.77,1.45
  482. // x = x-0.6;; y = y+0.3 z=z+0.5
  483. task.loadedMeshes[0].rotation = new BABYLON.Vector3(0, 0, 0);
  484. task.loadedMeshes[0].name = "tapblue";
  485. var vx = scene.getTransformNodeByName("蓝");
  486. vx.position = new BABYLON.Vector3(0, -1.2, 0);
  487. vx.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
  488. vx.scaling = new BABYLON.Vector3(0.015, 0.015, 0.015);
  489. };
  490. meshTask_tapblue.onError = function(task, message, exception) {
  491. console.log(message, exception);
  492. };
  493. var meshTask_tapred = assetsManager.addMeshTask(
  494. "skull task",
  495. "",
  496. "asset/",
  497. "tapRed.glb"
  498. );
  499. meshTask_tapred.onSuccess = function(task) {
  500. task.loadedMeshes[0].scaling = new BABYLON.Vector3(0.4, 0.4, -0.4);
  501. task.loadedMeshes[0].position = new BABYLON.Vector3(-1.929, 4.029, 0.968);
  502. //-2.5,3.77,1.45
  503. // x = x-0.6;; y = y+0.3 z=z+0.5
  504. task.loadedMeshes[0].rotation = new BABYLON.Vector3(0, 0, 0);
  505. task.loadedMeshes[0].name = "tapred";
  506. var vx = scene.getTransformNodeByName("红");
  507. vx.position = new BABYLON.Vector3(0, -1.2, 0);
  508. vx.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
  509. vx.scaling = new BABYLON.Vector3(0.015, 0.015, 0.015);
  510. };
  511. meshTask_tapred.onError = function(task, message, exception) {
  512. console.log(message, exception);
  513. };
  514. var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData(
  515. "textures/environmentSpecular.env",
  516. scene
  517. );
  518. //var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.env", scene);
  519. scene.environmentTexture = hdrTexture;
  520. // renderCanvas.style.backgroundImage = 'url("./textures/' + '4' + '.jpg")';
  521. assetsManager.load();
  522. drag = new BABYLON.PointerDragBehavior({
  523. dragPlaneNormal: new BABYLON.Vector3(0, 0, 1)
  524. });
  525. //drag.useObjectOrienationForDragging = false;
  526. drag.validateDrag = targetPosition => {
  527. console.log(targetPosition);
  528. if (targetPosition.x > 10.5 || targetPosition.x < -10.5) {
  529. return false;
  530. }
  531. if (targetPosition.z > 10.5 || targetPosition.z < -10.5) {
  532. return false;
  533. }
  534. if (oldtransformNodex != null) {
  535. return true;
  536. }
  537. };
  538. drag.onDragEndObservable.add(event => {
  539. console.log("dragEnd");
  540. //console.log(event);
  541. //console.log(line03_position)
  542. });
  543. //GUI
  544. h1 = new BABYLON.HighlightLayer("hl1", scene);
  545. h2 = new BABYLON.HighlightLayer("hl2", scene);
  546. h3 = new BABYLON.HighlightLayer("hl3", scene);
  547. var step = 0.1;
  548. var currentx = 1;
  549. var step2 = 0.1;
  550. var currentx2 = 0.1;
  551. h1.blurHorizontalSize = 0.1;
  552. var showx = 0;
  553. var showx2 = 2;
  554. scene.registerAfterRender(() => {
  555. h1.blurHorizontalSize = h1.blurVerticalSize + currentx;
  556. h2.blurHorizontalSize = h2.blurVerticalSize + currentx2;
  557. h3.blurHorizontalSize = h3.blurVerticalSize + currentx2;
  558. var a = scene.getMaterialByName("carpaint_baseRed");
  559. if (a != null) {
  560. if (a.albedoColor == b) {
  561. b = new BABYLON.Color3(0, 1, 0);
  562. a.albedoColor = b;
  563. }
  564. }
  565. var nodealert = scene.getTransformNodeByName("yangan06");
  566. if (nodealert != null) {
  567. var mesheses3 = null;
  568. if (nodealert.getClassName() == "TransformNode") {
  569. mesheses3 = nodealert.getChildMeshes(false);
  570. } else {
  571. mesheses3 = [];
  572. mesheses3.push(nodealert);
  573. }
  574. for (var i = 0; i < mesheses3.length; i++) {
  575. try {
  576. if (nodealert.baojing == true) {
  577. h3.addMesh(mesheses3[i], new BABYLON.Color3(1, 0, 0));
  578. } else {
  579. h3.removeMesh(mesheses3[i]);
  580. }
  581. } catch (error) {
  582. // alert(error)
  583. }
  584. }
  585. }
  586. var v2 = scene.getMeshByName("tapblue");
  587. if (v2 != null) {
  588. v2.lookAt(camera.globalPosition, 0, 0, Math.PI);
  589. }
  590. var v3 = scene.getMeshByName("tapred");
  591. if (v3 != null) {
  592. v3.lookAt(camera.globalPosition, 0, 0, Math.PI);
  593. }
  594. if (currentx > 0.5) {
  595. step *= -1;
  596. }
  597. if (currentx < 0) {
  598. step *= -1;
  599. }
  600. currentx += step;
  601. if (currentx2 > 5) {
  602. step2 *= -1;
  603. }
  604. if (currentx2 < 0) {
  605. step2 *= -1;
  606. }
  607. currentx2 += step2;
  608. if (dynamicTexture != null && PointerOverYangan != null) {
  609. var textx = scene.getTransformNodeByName(PointerOverYangan).wendu;
  610. var font_size = 36;
  611. var font = "bold " + font_size + "px Arial";
  612. dynamicTexture.drawText(
  613. textx + "°C",
  614. null,
  615. null,
  616. font,
  617. "#FFFFFF",
  618. "#000000",
  619. true
  620. );
  621. showx++;
  622. show = 50;
  623. }
  624. if (dynamicTexture2 != null && PointerOverYangan != null) {
  625. var textx = scene.getTransformNodeByName(PointerOverYangan).sidu;
  626. var font_size = 36;
  627. var font = "bold " + font_size + "px Arial";
  628. dynamicTexture2.drawText(
  629. textx + "%",
  630. null,
  631. null,
  632. font,
  633. "#FFFFFF",
  634. "#000000",
  635. true
  636. );
  637. }
  638. if (dynamicTexture3 != null && PointerOverYangan != null) {
  639. var textx = scene.getTransformNodeByName(PointerOverYangan).wendu;
  640. var font_size = 36;
  641. var font = "bold " + font_size + "px Arial";
  642. dynamicTexture3.drawText(
  643. textx + "°C",
  644. null,
  645. null,
  646. font,
  647. "#FFFFFF",
  648. "#000000",
  649. true
  650. );
  651. }
  652. if (dynamicTexture4 != null && PointerOverYangan != null) {
  653. var textx = scene.getTransformNodeByName(PointerOverYangan).sidu;
  654. var font_size = 36;
  655. var font = "bold " + font_size + "px Arial";
  656. dynamicTexture4.drawText(
  657. textx + "%",
  658. null,
  659. null,
  660. font,
  661. "#FFFFFF",
  662. "#000000",
  663. true
  664. );
  665. }
  666. });
  667. return scene;
  668. };
  669. var canvas = document.getElementById("renderCanvas");
  670. // load the 3D engine
  671. var engine = new BABYLON.Engine(canvas, true, {
  672. stencil: true
  673. });
  674. // call the createScene function
  675. var scene = createScene();
  676. scene.autoClear = true;
  677. scene.imageProcessingConfiguration.exposure = 1;
  678. scene.imageProcessingConfiguration.contrast = 1;
  679. scene.environmentIntensity = 0.4;
  680. engine.runRenderLoop(function() {
  681. scene.render();
  682. });
  683. window.addEventListener("resize", function() {
  684. engine.resize();
  685. });
  686. function HashMap() {
  687. //定义长度
  688. var length = 0;
  689. //创建一个对象
  690. var obj = new Object();
  691. //判断Map是否为空
  692. this.isEmpty = function() {
  693. return length == 0;
  694. };
  695. //判断对象中是否包含给定Key
  696. this.containsKey = function(key) {
  697. return key in obj;
  698. };
  699. //判断对象中是否包含给定的Value
  700. this.containsValue = function(value) {
  701. for (var key in obj) {
  702. if (obj[key] == value) {
  703. return true;
  704. }
  705. }
  706. return false;
  707. };
  708. //向map中添加数据
  709. this.put = function(key, value) {
  710. if (!this.containsKey(key)) {
  711. length++;
  712. }
  713. obj[key] = value;
  714. };
  715. //根据给定的key获取Value
  716. this.get = function(key) {
  717. return this.containsKey(key) ? obj[key] : null;
  718. };
  719. //根据给定的Key删除一个值
  720. this.remove = function(key) {
  721. if (this.containsKey(key) && delete obj[key]) {
  722. length--;
  723. }
  724. };
  725. //获得Map中所有的value
  726. this.values = function() {
  727. var _values = new Array();
  728. for (var key in obj) {
  729. _values.push(obj[key]);
  730. }
  731. return _values;
  732. };
  733. //获得Map中的所有key
  734. this.keySet = function() {
  735. var _keys = new Array();
  736. for (var key in obj) {
  737. _keys.push(key);
  738. }
  739. return _keys;
  740. };
  741. //获得Map的长度
  742. this.size = function() {
  743. return length;
  744. };
  745. //清空Map
  746. this.clear = function() {
  747. length = 0;
  748. obj = new Object();
  749. };
  750. }
  751. var yangans = new HashMap();
  752. yangans.put("YLS_MO_OAO_001", "yangan06");
  753. yangans.put("YLS_MO_CAM_001", "camera07");
  754. yangans.put("YLS_MO_CAM_002", "camera08");
  755. //功能转入报警
  756. function Myalert(MathineID, baojing) {
  757. scene.getMeshByName("tapblue").setEnabled(false);
  758. scene.getMeshByName("tapred").setEnabled(false);
  759. var theName = yangans.get(MathineID);
  760. alert(theName);
  761. if (theName == "yangan06") {
  762. scene.getTransformNodeByName("yangan06").baojing = baojing;
  763. }
  764. if (theName == "camera07") {
  765. scene.getTransformNodeByName("camera07").baojing = baojing;
  766. }
  767. if (theName == "camera08") {
  768. scene.getTransformNodeByName("camera08").baojing = baojing;
  769. }
  770. }
  771. //报警 true:表示报警, false :表示不报警
  772. // Myalert("YLS_MO_OAO_001",true)
  773. //设置温湿度
  774. function setAlertValue(MathineID, wendu, sidu) {
  775. var theName = yangans.get(MathineID);
  776. if (theName == "yangan06") {
  777. scene.getTransformNodeByName("yangan06").wendu = wendu;
  778. scene.getTransformNodeByName("yangan06").sidu = sidu;
  779. }
  780. }
  781. //设置温湿度: setAlertValue("DAK_MO_OAO_001",4,5)
  782. // setAlertValue("YLS_MO_OAO_001", 4, 5);
  783. // 设置是否显示
  784. function setYangGanCanshow(MathineID, canshow){
  785. var theName = yangans.get(MathineID);
  786. if(theName == "yangan06"){
  787. scene.getTransformNodeByName(theName).canshow = canshow;
  788. }
  789. }
  790. // setYangGanCanshow("DAK_MO_OAO_001",false)
  791. // function cameraClick(TheCamera) {
  792. // alert(TheCamera.nameID);
  793. // }
  794. function cameraClick(TheCamera) {
  795. window.parent.postMessage(
  796. {
  797. data: TheCamera.nameID
  798. },
  799. "*"
  800. );
  801. }
  802. // 监测父页面传来得初始化得温度湿度值
  803. window.addEventListener(
  804. "message",
  805. function(e) {
  806. deviceData = e.data.data;
  807. },
  808. false
  809. );