`Cesium`自定义天空盒子图片

效果图

改造`SkyBox`代码

const {BoxGeometry,Cartesian3,defaultValue,defined,destroyObject,DeveloperError,GeometryPipeline,Matrix3,Matrix4,Transforms,VertexFormat,BufferUsage,CubeMap,DrawCommand,loadCubeMap,RenderState,VertexArray,BlendingState,SceneMode,ShaderProgram,ShaderSource
} = window.Cesium
export class GroundSkyBox {constructor({viewer, sources, show = true}) {this.sources = sourcesthis.viewer = viewerthis.show = showthis.viewer.scene.skyAtmosphere.show = falsethis.rewriteSkyBox()}rewriteSkyBox() {//片元着色器，直接从源码复制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 (!defined(Matrix4.getRotation)) {Matrix4.getRotation = Matrix4.getMatrix3}function SkyBoxOnGround(options) {/*** 近景天空盒* @type Object* @default undefined*/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 = undefinedthis._attributeLocations = undefinedthis._useHdr = undefined}const skyboxMatrix3 = new Matrix3()SkyBoxOnGround.prototype.update = function (frameState, useHdr) {const that = thisif (!this.show) {return undefined}if (frameState.mode !== SceneMode.SCENE3D &&frameState.mode !== SceneMode.MORPHING) {return undefined}if (!frameState.passes.render) {return undefined}const context = frameState.contextif (this._sources !== this.sources) {this._sources = this.sourcesconst sources = this.sourcesif (!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) {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._commandcommand.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}SkyBoxOnGround.prototype.isDestroyed = function () {return false}SkyBoxOnGround.prototype.destroy = function () {const command = this._commandcommand.vertexArray = command.vertexArray && command.vertexArray.destroy()command.shaderProgram =command.shaderProgram && command.shaderProgram.destroy()this._cubeMap = this._cubeMap && this._cubeMap.destroy()return destroyObject(this)}this.viewer.scene.skyBox = new SkyBoxOnGround(this)}
}

直接使用

导入上面的js文件

import {GroundSkyBox} from './GroundSkyBox'
const viewer = new Cesium.Viewer('aimap', {infoBox: false,animation: false, //左下角的动画仪表盘baseLayerPicker: false, //右上角的图层选择按钮geocoder: false, //搜索框homeButton: false, //home按钮sceneModePicker: false, //模式切换按钮timeline: false, //底部的时间轴navigationHelpButton: false, //右上角的帮助按钮，fullscreenButton: false, //右下角的全屏按钮selectionIndicator: false, // 图层选择指示器zoomIndicatorContainer: false, // 缩放指示器navigation: false, //指南针terrainProvider: new Cesium.EllipsoidTerrainProvider({}) //移除自带地形
})
// 使用到的图片在下文有提示
new GroundSkyBox({viewer,sources: {positiveX: require('@/assets/skybox-images/Standard-Cube-Map/px.png'),negativeX: require('@/assets/skybox-images/Standard-Cube-Map/nx.png'),positiveY: require('@/assets/skybox-images/Standard-Cube-Map/pz.png'),negativeY: require('@/assets/skybox-images/Standard-Cube-Map/nz.png'),positiveZ: require('@/assets/skybox-images/Standard-Cube-Map/py.png'),negativeZ: require('@/assets/skybox-images/Standard-Cube-Map/ny.png')}
})

自定义图片说明

1. 通过Poly Haven网址进行图片下载

2. 通过 HDRI to CubeMap (matheowis.github.io)网址进行HDR文件处理

3. 切割出来的文件需要再次处理

字段名	别称	旋转角度
px	right	-90
nx	left	90
py	back	保持不变
ny	front	180
pz	up	保持不变
nz	down	180

py和pz更换位置ny和nz更换位置

positiveY -> pz.png
negativeY -> nz.png
positiveZ -> py.png
negativeZ -> ny.png

 // positiveY 需要更换对应的的位置positiveY: require('@/assets/skybox-images/Standard-Cube-Map/pz.png'),negativeY: require('@/assets/skybox-images/Standard-Cube-Map/nz.png'),positiveZ: require('@/assets/skybox-images/Standard-Cube-Map/py.png'),negativeZ: require('@/assets/skybox-images/Standard-Cube-Map/ny.png')

旋转之后

gitee的资源地址

Cesium自定义天空盒子图片相关推荐

Cesium修改天空盒子，含实测源码，支持晴天和夕阳
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.系统自带了天空盒子接口是否可以直接用? 二.研
Cesium与STK中的天空盒子(skybox)
天空盒子是计算机图形学中的概念,用于在3D展示中,显示观测者上下左右前后的全景图像. 星空图介绍在STK和Cesium中,常常以地球为中心天体,背景就是宇宙星空,观测者超哪个方向看,就可以看到对应方 ...
cesium自定义远、近天空盒图片
外天空盒实现的效果图本来想找个太空图做外天空盒的,但是资源没有找到... 1.先准备需要的6张尺寸为1024*1024的png/jpg图片,图片可以通过Poly Haven 网站下载 2.下载的时候 ...
Cesium近景蓝色晴空万里天空盒子替换方法源码及图片资源-实测可用
最近看着Cesium默认的近景天空就觉得心情有点灰暗和压抑,看到有的平台的天空是蓝天白云非常的养眼,就尝试这更改下,原来Cesium提供的天空盒子是远景的,近景的话,就是蓝白色的天空测试的版本:Ce ...
cesium 近地天空（天空盒子）
以下为源码,直接复制粘贴就好 // GroundSkyBox.js 天空盒子方法 (function () {var BoxGeometry = Cesium.BoxGeometry,Cartesia ...
Unity 360全景图转换为天空盒子
第一种方式把你的全景图拖入到unity里面,然后新建材质球,选择shader/skybox/panoramic,更换全景贴图 ok 把天空盒换成你的材质球结束 (这个目前有一个问题,有一条缝,地面会 ...
Unity3D - 使用天空盒子（Using Skyboxes）
在场景中,天空盒子(skybox)是代表天空或是远景的全景纹理图片. 理解天空盒子(Understanding skybox) 天空盒是一个全景视图,分为六个纹理,表示沿主轴(上,下,左,右,前,后) ...
OpenGL应用：天空盒子(SkyBox)
天空盒子(skyBox) SkyBox 制作3D游戏的一个经典技术应用. 原理 SkyBox 是基于正方体模型的渲染技术.将6个方向拍下来的天空图片分别贴在正方体的对应面上,从内部观察正方体就可以得到 ...
unity3d场景怎么添加天空盒子?
unity3d场景中想要添加天空盒子,该怎么添加呢?下面我们就来看看详细的教程. 1.先下载组成天空盒子的天空图片 2.把天空图片拖进unity3d中创建的文件夹 3.新建一个材质球 4.把材质球的s ...

Cesium自定义天空盒子图片

`Cesium`自定义天空盒子图片

改造`SkyBox`代码

直接使用

自定义图片说明

1. 通过Poly Haven网址进行图片下载

2. 通过 HDRI to CubeMap (matheowis.github.io)网址进行HDR文件处理

3. 切割出来的文件需要再次处理

Cesium自定义天空盒子图片相关推荐

最新文章

热门文章

Cesium自定义天空盒子图片

Cesium自定义天空盒子图片

改造SkyBox代码

直接使用

自定义图片说明

1. 通过Poly Haven网址进行图片下载

2. 通过 HDRI to CubeMap (matheowis.github.io)网址进行HDR文件处理

3. 切割出来的文件需要再次处理

Cesium自定义天空盒子图片相关推荐

最新文章

热门文章

`Cesium`自定义天空盒子图片

改造`SkyBox`代码