我们用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 基类
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