SkyBox.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /* 引入Cesium */
  2. // import * as Cesium from 'Cesium';
  3. import SkyBoxOnGround from "../../Core/SkyBoxOnGround.js";
  4. /**
  5. * 天空盒子
  6. */
  7. class SkyBox {
  8. /**
  9. * 默认初始化
  10. * @param {Object} viewer 三维场景
  11. */
  12. constructor(viewer) {
  13. if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
  14. this._viewer = viewer;
  15. this._farSkyBox = viewer.scene.skyBox; //默认天空盒子,即远景天空盒子
  16. }
  17. }
  18. /**
  19. * 通用对外公开函数
  20. */
  21. Object.assign(SkyBox.prototype, /** @lends SkyBox.prototype */ {
  22. /**
  23. * 自定义天空盒子
  24. * @param {Object} options 具有以下属性:
  25. * @param {Object} [options.type="蓝天"] 默认蓝天,晚霞,阴天,紫色星空,蓝色星空
  26. * @param {Object} [options.sources] 天空盒子6个方向的图片地址(立方体全景图片)
  27. * @param {String} [options.sources.positiveX]
  28. * @param {String} [options.sources.negativeX]
  29. * @param {String} [options.sources.positiveY]
  30. * @param {String} [options.sources.negativeY]
  31. * @param {String} [options.sources.positiveZ]
  32. * @param {String} [options.sources.negativeZ]
  33. * @param {Number} [options.height=200000] 开始显示自定义天空盒子高度,默认=200000
  34. *
  35. * @example
  36. * setGroundSkyBox({
  37. * type:"蓝天",
  38. * height:200000,
  39. * sources: { //蓝天
  40. * positiveX: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Right.jpg',
  41. * negativeX: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Left.jpg',
  42. * positiveY: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Front.jpg',
  43. * negativeY: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Back.jpg',
  44. * positiveZ: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Up.jpg',
  45. * negativeZ: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/imgs/SkyBox/bluesky/Down.jpg',
  46. * },
  47. * });
  48. */
  49. setGroundSkyBox(options) {
  50. options = options || {};
  51. options.height = options.height || 200000;
  52. options.type = options.type || "蓝天";
  53. if (!options.sources) {
  54. switch (options.type) {
  55. case "晚霞":
  56. options.sources = {
  57. positiveX: 'jt3dSDK/imgs/skybox/01/px.png',
  58. negativeX: 'jt3dSDK/imgs/skybox/01/nx.png',
  59. positiveY: 'jt3dSDK/imgs/skybox/01/py.png',
  60. negativeY: 'jt3dSDK/imgs/skybox/01/ny.png',
  61. positiveZ: 'jt3dSDK/imgs/skybox/01/pz.png',
  62. negativeZ: 'jt3dSDK/imgs/skybox/01/nz.png',
  63. }
  64. break;
  65. case "阴天":
  66. options.sources = {
  67. positiveX: 'jt3dSDK/imgs/skybox/02/px.jpg',
  68. negativeX: 'jt3dSDK/imgs/skybox/02/nx.jpg',
  69. positiveY: 'jt3dSDK/imgs/skybox/02/py.jpg',
  70. negativeY: 'jt3dSDK/imgs/skybox/02/ny.jpg',
  71. positiveZ: 'jt3dSDK/imgs/skybox/02/pz.jpg',
  72. negativeZ: 'jt3dSDK/imgs/skybox/02/nz.jpg',
  73. }
  74. break;
  75. case "蓝天":
  76. options.sources = {
  77. positiveX: 'jt3dSDK/imgs/skybox/03/px.jpg',
  78. negativeX: 'jt3dSDK/imgs/skybox/03/nx.jpg',
  79. positiveY: 'jt3dSDK/imgs/skybox/03/py.jpg',
  80. negativeY: 'jt3dSDK/imgs/skybox/03/ny.jpg',
  81. positiveZ: 'jt3dSDK/imgs/skybox/03/pz.jpg',
  82. negativeZ: 'jt3dSDK/imgs/skybox/03/nz.jpg',
  83. }
  84. break;
  85. case "紫色星空":
  86. options.sources = {
  87. positiveX: 'jt3dSDK/imgs/skybox/04/px.jpg',
  88. negativeX: 'jt3dSDK/imgs/skybox/04/nx.jpg',
  89. positiveY: 'jt3dSDK/imgs/skybox/04/py.jpg',
  90. negativeY: 'jt3dSDK/imgs/skybox/04/ny.jpg',
  91. positiveZ: 'jt3dSDK/imgs/skybox/04/pz.jpg',
  92. negativeZ: 'jt3dSDK/imgs/skybox/04/nz.jpg',
  93. }
  94. break;
  95. case "蓝色星空":
  96. options.sources = {
  97. positiveX: 'jt3dSDK/imgs/skybox/05/px.jpg',
  98. negativeX: 'jt3dSDK/imgs/skybox/05/nx.jpg',
  99. positiveY: 'jt3dSDK/imgs/skybox/05/py.jpg',
  100. negativeY: 'jt3dSDK/imgs/skybox/05/ny.jpg',
  101. positiveZ: 'jt3dSDK/imgs/skybox/05/pz.jpg',
  102. negativeZ: 'jt3dSDK/imgs/skybox/05/nz.jpg',
  103. }
  104. break;
  105. }
  106. } else if (!Cesium.defined(options.sources.positiveX) ||
  107. !Cesium.defined(options.sources.negativeX) ||
  108. !Cesium.defined(options.sources.positiveY) ||
  109. !Cesium.defined(options.sources.negativeY) ||
  110. !Cesium.defined(options.sources.positiveZ) ||
  111. !Cesium.defined(options.sources.negativeZ)
  112. ) {
  113. throw new Cesium.DeveloperError(
  114. "options.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties."
  115. );
  116. }
  117. let _self = this;
  118. //自定义天空盒子(天空盒子需要显示)
  119. // let groundSkyBox = new Cesium.SkyBox({//自带的有bug,天空效果出现倾斜
  120. // sources: options.sources,
  121. // show: true
  122. // });
  123. let groundSkyBox = new SkyBoxOnGround({ //在源码基础上修改后的
  124. sources: options.sources,
  125. show: true
  126. });
  127. //如果高度小于某个值 显示近景天空盒 否则显示远景天空盒
  128. _self._viewer.scene.postRender.addEventListener(() => {
  129. var e = _self._viewer.camera.position;
  130. if (Cesium.Cartographic.fromCartesian(e).height < options.height) {
  131. _self._viewer.scene.skyBox = groundSkyBox; // 显示自定义的天空盒
  132. } else {
  133. _self._viewer.scene.skyBox = _self._defaultSkyBox; // 显示原始的天空盒
  134. }
  135. });
  136. }
  137. });
  138. export default SkyBox;