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


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 &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

cesium 构建天空盒相关推荐

Cesium之天空盒对应方位
下文讲解一下关于Cesium的天空盒具体方位. 天空盒对应图一个立方体展开图,相当于一个站在negz的位置,背对电脑屏幕,对应关系如下 negz→down posx→right negx→left ...
Cesium自定义天空盒
Cesium自定义天空盒前言 Cesium自带有天空盒满足大多数场景,但是在一下特殊场景可能自带的天空盒不太适用. 实现效果实现思路 Cesium远景天空盒可以使用Cesium.SkyBox类实现 ...
基于UE4的Cesium构建
基于UE4的Cesium构建文章目录基于UE4的Cesium构建一.Cesium插件 1.Cesium构建对象二.在UE4中对Cesium添加模型一.Cesium插件 1.Cesium构建对 ...
Cesium——创建天空盒（如何获取天空盒资源）
需要在cesium中将天空设置为蓝天白云,首先就是天空盒的资源难找,然后感谢这位大哥的文章,成功完成了设置 https://blog.csdn.net/qq_25519615/article/det ...
Cesium从入门到放弃9：近景天空盒（不改源码）
先上效果图 Cesium近景默认的天空盒只有相机距离较远时才能看到,在很多小场景下(比如智慧城市等)默认的天空盒可能无法满足用户的需求,所以近景天空盒的需要就诞生了,如果想要不改源码实现Cesium近 ...
DirectX11 With Windows SDK--22 立方体映射：静态天空盒的读取与实现
前言这一章我们主要学习由6个纹理所构成的立方体映射,以及用它来实现一个静态天空盒. 但是在此之前先要消除两个误区: 认为这一章的天空盒就是简单的在一个超大立方体的六个面内部贴上天空盒纹理: 认为天空 ...
Cesium与STK中的天空盒子(skybox)
天空盒子是计算机图形学中的概念,用于在3D展示中,显示观测者上下左右前后的全景图像. 星空图介绍在STK和Cesium中,常常以地球为中心天体,背景就是宇宙星空,观测者超哪个方向看,就可以看到对应方 ...
vue3.x +Cesium vue3.x中安装使用cesium
Vue3.x 项目中如何使用Cesium构建三维地图项目本文列举两种常用使用方法: 1.使用vue-cli-plugin-cesium 插件安装cesium(配置较为简单) 2.安装cesium 手 ...
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载详细过程
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载 1.Vue-cli 3.0 + cesium 构建参考资料地址Vue-cli 3.0 + cesium 构建注意,因为文档中设置默认 ...
2021-07-07 https://github.com/pasu/ExamplesforCesium/wiki
Cesium手册中文译者:Peter(陆国伟) 本文出处:https://github.com/pasu/ExamplesforCesium/wiki 本文遵循CC创作共用版权协议,要求署名+非商业+ ...

cesium 构建天空盒

cesium 构建天空盒相关推荐

最新文章

热门文章