cesium 构建天空盒

我们用typescript 实现 cesium 天空盒子

• let skyBox = {
• //会直接关闭大气层（存在大气层，近景效果不佳）
• nearSkyBox: {
• positiveX: "./images/skybox/03/px.jpg",
• positiveY: "./images/skybox/03/py.jpg",
• positiveZ: "./images/skybox/03/pz.jpg",
• negativeX: "./images/skybox/03/nx.jpg",
• negativeY: "./images/skybox/03/ny.jpg",
• negativeZ: "./images/skybox/03/nz.jpg",
• },
• farDistance: 5500,
• farSkyBox: {
• positiveX: "./images/skybox/04/px.jpg",
• positiveY: "./images/skybox/04/py.jpg",
• positiveZ: "./images/skybox/04/pz.jpg",
• negativeX: "./images/skybox/04/nx.jpg",
• negativeY: "./images/skybox/04/ny.jpg",
• negativeZ: "./images/skybox/04/nz.jpg",
• },
• };
• let skyBox = new SkyBox(viewer, skyBox);//设置天空盒

我们定义参数类

• export interface PskyboxSource {
• positiveX: String,
• negativeX: String,
• positiveY: String,
• negativeY: String,
• positiveZ: String,
• negativeZ: String
• }
• export interface PSkyBox {
• nearSkyBox?: PskyboxSource,//近景的天空盒
• farDistance?: Number,//近景和远景的分割距离
• farSkyBox?: PskyboxSource,//远景的天空盒
• }

我们定义SkyBox 基类
```javascript

const BoxGeometry = Cesium.BoxGeometry;
const Cartesian3 = Cesium.Cartesian3;
const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const destroyObject = Cesium.destroyObject;
const DeveloperError = Cesium.DeveloperError;
const GeometryPipeline = Cesium.GeometryPipeline;
const Matrix3 = Cesium.Matrix3;
const Matrix4 = Cesium.Matrix4;
const Transforms = Cesium.Transforms;
const VertexFormat = Cesium.VertexFormat;
const BufferUsage = Cesium.BufferUsage;
const CubeMap = Cesium.CubeMap;
const DrawCommand = Cesium.DrawCommand;
const loadCubeMap = Cesium.loadCubeMap;
const RenderState = Cesium.RenderState;
const VertexArray = Cesium.VertexArray;
const BlendingState = Cesium.BlendingState;
const SceneMode = Cesium.SceneMode;
const ShaderProgram = Cesium.ShaderProgram;
const ShaderSource = Cesium.ShaderSource;
//片元着色器，直接从源码复制
const SkyBoxFS = "uniform samplerCube u_cubeMap;\n\
varying vec3 v_texCoord;\n\
void main()\n\
{\n\
vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));\n\
gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);\n\
}\n\
";

//顶点着色器有修改，主要是乘了一个旋转矩阵
const SkyBoxVS = "attribute vec3 position;\n\
varying vec3 v_texCoord;\n\
uniform mat3 u_rotateMatrix;\n\
void main()\n\
{\n\
vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));\n\
gl_Position = czm_projection * vec4(p, 1.0);\n\
v_texCoord = position.xyz;\n\
}\n\
";
/**

• 为了兼容高版本的Cesium，因为新版cesium中getRotation被移除
  */
  if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
  Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
  }
  const skyboxMatrix3 = new Matrix3();

/**

• 近景天空盒
  */
  export class SkyBoxOnGround {

   

  sources: any;
  _sources: any = undefined;
  show: boolean = true;
  _command: any;
  _cubeMap: any;
  _attributeLocations: any;
  _useHdr: any;
  constructor(options: any) {
  super();
  this.sources = options.sources;
  this.show = options.show || true;
  this._command = new DrawCommand({
  modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
  owner: this
  });
  this._cubeMap = undefined;
  this._attributeLocations = undefined;
  this._useHdr = undefined;
  }
  update(frameState: any, useHdr: any) {
  const that = this;
  if (!this.show) {
  return undefined;
  }
  if ((frameState.mode !== SceneMode.SCENE3D) &&
  (frameState.mode !== SceneMode.MORPHING)) {
  return undefined;
  }

  • if (!frameState.passes.render) {
  • return undefined;
  • }
  •  
  • const context = frameState.context;
  •  
  • if (this._sources !== this.sources) {
  • this._sources = this.sources;
  • const sources = this.sources;

    if ((!defined(sources.positiveX)) ||
    

  • (!defined(sources.negativeX)) ||
  • (!defined(sources.positiveY)) ||
  • (!defined(sources.negativeY)) ||
  • (!defined(sources.positiveZ)) ||
  • (!defined(sources.negativeZ))) {
  • throw new DeveloperError('this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.');
  • }
  •  
  • if ((typeof sources.positiveX !== typeof sources.negativeX) ||
  • (typeof sources.positiveX !== typeof sources.positiveY) ||
  • (typeof sources.positiveX !== typeof sources.negativeY) ||
  • (typeof sources.positiveX !== typeof sources.positiveZ) ||
  • (typeof sources.positiveX !== typeof sources.negativeZ)) {
  • throw new DeveloperError('this.sources properties must all be the same type.');
  • }
  •  
  • if (typeof sources.positiveX === 'string') {
  • // Given urls for cube-map images. Load them.
  • loadCubeMap(context, this._sources).then(function (cubeMap:any) {
  • that._cubeMap = that._cubeMap && that._cubeMap.destroy();
  • that._cubeMap = cubeMap;
  • });
  • } else {
  • this._cubeMap = this._cubeMap && this._cubeMap.destroy();
  • this._cubeMap = new CubeMap({
  • context: context,</code></pre></li>

 更多参考 https://xiaozhuanlan.com/topic/0946827135