我們用typescript 實現(xiàn) cesium 天空盒子

let skyBox = {
//會直接關(guān)閉大氣層（存在大氣層，近景效果不佳）
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);//設(shè)置天空盒
我們定義參數(shù)類

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 基類

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; //片元著色器，直接從源碼復(fù)制 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\ ";//頂點著色器有修改，主要是乘了一個旋轉(zhuǎ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中g(shù)etRotation被移除 */ 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 &amp;&amp; that._cubeMap.destroy(); that._cubeMap = cubeMap; }); } else { this._cubeMap = this._cubeMap &amp;&amp; this._cubeMap.destroy(); this._cubeMap = new CubeMap({ context: context,</code></pre></li>更多參考 https://xiaozhuanlan.com/topic/0946827135

總結(jié)

以上是生活随笔為你收集整理的cesium 构建天空盒的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。