外天空盒实现的效果图

本来想找个太空图做外天空盒的，但是资源没有找到...

1.先准备需要的6张尺寸为1024*1024的png/jpg图片，图片可以通过Poly Haven 网站下载

2.下载的时候选择HDR文件

3. 通过 HDRI to CubeMap (matheowis.github.io)网址进行HDR文件处理，切成需要的六张图

4.在上个步骤中点击SAVE按钮进行保存操作

5.下载成功后会得到6张1024*1024的图片，如下图

6.此时下载下来的图片还不能直接使用，需要用PS对4张图片做旋转处理，这里贴出不处理的情况下显示的效果

此时发现天空盒的图片是错乱的。

每张图的具体操作如下

字段名	别称	旋转角度
px	Right	-90
nx	Left	90
py	Back	不变
ny	Front	180
pz	Up	不变
nz	Down	180

操作完成后的图片效果

最后在代码中

注意如下四个位置的关系，

positiveY: '/ok/pz.png',

negativeY: '/ok/nz.png',

positiveZ: '/ok/py.png',

negativeZ: '/ok/ny.png'

到此，外天空盒的效果已实现完成

内天空盒效果图

1.内天空盒子图片的修改与外天空盒一样

2.但是在实现效果前需要先写个类来改造cesium的skyBox

3.创建一个SkyBoxOnGround类，代码如下

import * as Cesium from 'cesium'//片元着色器，直接从源码复制
const SkyBoxFS = `uniform samplerCube u_cubeMap;varying vec3 v_texCoord;void main(){vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);}
`;//顶点着色器有修改，主要是乘了一个旋转矩阵
const SkyBoxVS = `attribute vec3 position;varying vec3 v_texCoord;uniform mat3 u_rotateMatrix;void main(){vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));gl_Position = czm_projection * vec4(p, 1.0);v_texCoord = position.xyz;}
`;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 skyboxMatrix3 = new Matrix3();/**
* 为了兼容高版本的Cesium，因为新版cesium中getRotation被移除
*/
if (!Cesium.defined(Cesium.Matrix4.getRotation)) {Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
}/**
* 近景天空盒
* @type Object
* @default undefined
*/
export default class SkyBoxOnGround{constructor(options){this.sources = options.sources;this._sources = undefined;/*** Determines if the sky box will be shown.** @type {Boolean}* @default true*/this.show = defaultValue(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, useHdr){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') {loadCubeMap(context, this._sources).then(function (cubeMap) {that._cubeMap = that._cubeMap && that._cubeMap.destroy();that._cubeMap = cubeMap;});} else {this._cubeMap = this._cubeMap && this._cubeMap.destroy();this._cubeMap = new CubeMap({context: context,source: sources});}}const command = this._command;command.modelMatrix = Transforms.eastNorthUpToFixedFrame(frameState.camera._positionWC);if (!defined(command.vertexArray)) {command.uniformMap = {u_cubeMap: function () {return that._cubeMap;},u_rotateMatrix: function () {return Matrix4.getRotation(command.modelMatrix, skyboxMatrix3);},};const geometry = BoxGeometry.createGeometry(BoxGeometry.fromDimensions({dimensions: new Cartesian3(2.0, 2.0, 2.0),vertexFormat: VertexFormat.POSITION_ONLY}));const attributeLocations = this._attributeLocations = GeometryPipeline.createAttributeLocations(geometry);command.vertexArray = VertexArray.fromGeometry({context: context,geometry: geometry,attributeLocations: attributeLocations,bufferUsage: BufferUsage._DRAW});command.renderState = RenderState.fromCache({blending: BlendingState.ALPHA_BLEND});}if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {const fs = new ShaderSource({defines: [useHdr ? 'HDR' : ''],sources: [SkyBoxFS]});command.shaderProgram = ShaderProgram.fromCache({context: context,vertexShaderSource: SkyBoxVS,fragmentShaderSource: fs,attributeLocations: this._attributeLocations});this._useHdr = useHdr;}if (!defined(this._cubeMap)) {return undefined;}return command;}setSkyBox(viewer){// 自带的默认天空盒let defaultSkybox = viewer.scene.skyBox;// 渲染前监听并判断相机位置viewer.scene.preUpdate.addEventListener(() => {let position = viewer.scene.camera.position;let cameraHeight = Cesium.Cartographic.fromCartesian(position).height;if (cameraHeight < 240000) {viewer.scene.skyBox = this;viewer.scene.skyAtmosphere.show = false;} else {viewer.scene.skyBox = defaultSkybox;viewer.scene.skyAtmosphere.show = true;}})}isDestroyed(){return false}destroy(){const command = this._command;command.vertexArray = command.vertexArray && command.vertexArray.destroy();command.shaderProgram = command.shaderProgram && command.shaderProgram.destroy();this._cubeMap = this._cubeMap && this._cubeMap.destroy();return destroyObject(this);}
}

4.使用这个类，方法如下

1.先导入这个类

import SkyBoxOnGround from "../../assets/js/SkyBoxOnGround"

2.创建类的实例，传入viewer对象

    let groundSkybox = new SkyBoxOnGround({sources: {positiveX: '/skybox/px.png',negativeX: '/skybox/nx.png',positiveY: '/skybox/pz.png',negativeY: '/skybox/nz.png',positiveZ: '/skybox/py.png',negativeZ: '/skybox/ny.png'}})groundSkybox.setSkyBox(viewer)

到此，内部天空盒大功告成！！！

cesium自定义远、近天空盒图片相关推荐

记载一次cesium加载近景天空盒的例子
参考文章链接先放一套天空盒的图片,从网上找了很久没有找到合适的,先放图片上图是已经旋转过的正确的方位图,具体天空盒的图片,具体方位对应可以参考博客cesium天空盒方位对应 //需要修改cesi ...
Cesium自定义天空盒子图片
Cesium自定义天空盒子图片效果图改造SkyBox代码 const {BoxGeometry,Cartesian3,defaultValue,defined,destroyObject,Deve ...
Cesium从入门到放弃9：近景天空盒（不改源码）
先上效果图 Cesium近景默认的天空盒只有相机距离较远时才能看到,在很多小场景下(比如智慧城市等)默认的天空盒可能无法满足用户的需求,所以近景天空盒的需要就诞生了,如果想要不改源码实现Cesium近 ...
Cesium自定义天空盒
Cesium自定义天空盒前言 Cesium自带有天空盒满足大多数场景,但是在一下特殊场景可能自带的天空盒不太适用. 实现效果实现思路 Cesium远景天空盒可以使用Cesium.SkyBox类实现 ...
人工智能离我们有多远/近？
人工智能离我们有多远/近? 柯洁在跟AlphaGo下完棋之后讲过一句话:"人类围棋几千年的发展,我们只看到了冰山一角,而AlphaGo则有了上帝的视角". 有人说人工智能近在眼前, ...
Magento2创建自定义Widget 并通过添加图片选择器插入图片
为什么80%的码农都做不了架构师?>>> 创建自定义Widget 并通过添加图片选择器插入图片自定义widget 先在模块的etc 配置文件中创建widget.xml配置文件 ...
微信分享网页时自定义标题、描述和图片
用微信打开一个网页,选择右上角的"发送给朋友"后,收到的消息是这样的: 而为了推广效果,我们更希望能自定义标题.描述和图片,效果如下图: 下面介绍下怎样来实现这个功能 <sc ...
百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决我们在阿里巴巴矢量库找的icon 保存到本地结论我们在阿里巴巴矢量库找的icon 保存到本地链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
android xml图片缩放,Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码...
概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放. /** * 自定义的ImageView控制,可对图片进行多点触控缩放和拖动 * * @author qiuwan ...

cesium自定义远、近天空盒图片

到此，内部天空盒大功告成！！！

cesium自定义远、近天空盒图片相关推荐

最新文章

热门文章