【前端】智能库房综合管理系统前端项目
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.

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