skyBox 近地时角度倾斜问题,天空倾斜

news2025/1/15 20:48:30

近地出现角度不对问题

在这里插入图片描述
将下面代码放入js文件,引入项目。
本质是在Cesium.skyBox的代码上修改,并给Cesium重新增添近地的天空盒
需要注意的是,代码最后的Cesium.GroundSkyBox= SkyBoxOnGround

调用方式: import ‘…/…/路径’
然后cesium.skyBox换成GroundSkyBox即可
viewer.scene.skyBox = new Cesium.GroundSkyBox({
sources: {
positiveX: require(‘./skyBox/Right.jpg’),
negativeX: require(‘./skyBox/Left.jpg’),
positiveY: require(‘./skyBox/Front.jpg’),
negativeY: require(‘./skyBox/Back.jpg’),
positiveZ: require(‘./skyBox/Up.jpg’),
negativeZ: require(‘./skyBox/Down.jpg’)
}
})
修改后的效果
在这里插入图片描述


/* eslint-disable */
(function () {
    const Cesium = window.Cesium;
    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;
    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;
    }
    `;
    /**
    * 为了兼容高版本的Cesium,因为新版cesium中getRotation被移除
    */
    if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
    Cesium.Matrix4.getRotation = Cesium.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 = undefined;
    
    this._attributeLocations = undefined;
    this._useHdr = undefined;
    }
    
    const skyboxMatrix3 = new Matrix3();
    SkyBoxOnGround.prototype.update = function (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') {
    // 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._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;
    };
    SkyBoxOnGround.prototype.isDestroyed = function () {
    return false
    };
    SkyBoxOnGround.prototype.destroy = function () {
    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);
    }
    Cesium.GroundSkyBox= SkyBoxOnGround
    })();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/94054.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

地址汇总详细讲解(内附非纯末梢)

♥️作者:小刘在这里 ♥️每天分享云计算网络运维课堂笔记,疫情之下,你我素未谋面,但你一定要平平安安,一 起努力,共赴美好人生! ♥️夕阳下,是最美的,绽放,…

5.2 词向量Word Embedding

在自然语言处理任务中,词向量(Word Embedding)是表示自然语言里单词的一种方法,即把每个词都表示为一个N维空间内的点,即一个高维空间内的向量。通过这种方法,实现把自然语言计算转换为向量计算。 如 图1 …

转转用户画像平台实践

文章目录1. 背景2. 什么是用户画像3. 标签画像的应用场景4. 转转用户画像平台的实践4.1 系统结构图4.2 标签画像的构建原则4.3 标签类型和规则4.4 标签的生产加工4.5 标签的存储设计4.6 用户洞察4.7 用户分群计算4.8 ID-MAPPING5 未来规划6 总结1. 背景 转转作为二手电商交易领…

Linux C编程一站式学习笔记2

Linux C编程一站式学习笔记 chap2 常量、变量和表达式 本书以C99为标准 一.继续hello world 加入更多注释的hello world 可以用ctrl(shift)v复制到vim里面 #include <stdio.h>/* * comment1* main: generate some simple output*/int main(void) {printf(/* comment2 */…

【JS ES6】了解Symbol类型

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 ajax学习 目录声明定义Symbol的几种方式使用Symbol解决字符串耦合问题扩展特性与对象属性保护声明定义Sym…

Qt5.6.1移植海思Hi3521d(三)

系列文章目录 Qt5.6.1移植海思Hi3521d&#xff08;一&#xff09; Qt5.6.1移植海思Hi3521d&#xff08;二&#xff09; 前言 本章讲解如何将编译好的qt程序移植到海思Hi3521D板子上&#xff0c;并且能够启动qt界面&#xff0c;和正常显示中文 一、移植qt库 创建qt.conf&#…

不再封控,各高校要如何开展教学

疫情政策逐步放开&#xff0c;石家庄、福州、广西等地各高校发布寒暑假和期末课程安排。 广西科技大学要求从2022年12月13日下午起&#xff0c;停止所有线下课程&#xff0c;未完成的教学任务启动线上教学。 在疫情这三年里&#xff0c;线上教学已经成为学校的主要教学手段&…

Python操作Excel

文章目录xlrd模块安装xlrd库打开Excel文件读取获取指定工作表操作指定行操作指定列操作指定单元格使用示例xlrd模块 xlrd是Python处理Excel表格数据的一个模块&#xff0c;能够对Excel中的数据进行读取。 安装xlrd库 在命令行或终端中输入以下命令进行安装&#xff1a; pip…

python数据分析 之 pandas数据统计

目录 一&#xff1a;数据集准备 二&#xff1a;加载文件 三&#xff1a;分组操作进行统计 一&#xff1a;数据集准备 可以创建一个txt&#xff0c;并放置pycharm工程目录下 下面是博主的数据集测试&#xff0c;所用数据&#xff0c;需要的自取 1001,Chinese,1,80 1001,Chine…

富芮坤蓝牙FR801xH开发环境搭建

富芮坤蓝牙FR801xH方案开发资源包网盘下载链接&#xff1a;网盘 提取码&#xff1a;30qu 搭建过程&#xff1a; 安装Keil开发工具:mdk525.exe 可以从Keil官网下载&#xff1a;http://www.keil.com/files/eval/MDK525.EXE 也可以使用网盘tools目录里的包装包 其中需要注意选择的…

Qt扫盲-QScrollArea理论总结

这里写目录标题1. 概述2. 滚动条策略3. 子控件4. 尺寸提示1. 概述 QScrollArea 用于显示滚动区域框架内的子控件的内容。如果控件超过框架的大小&#xff0c;视图可以提供滚动条&#xff0c;以便可以查看子控件的整个区域。子控件必须使用 setWidget() 指定。但是在 QDesigner…

【车载开发系列】UDS诊断---请求下载($0x34)

【车载开发系列】UDS诊断—请求下载&#xff08;$0x34&#xff09; UDS诊断---请求下载&#xff08;$0x34&#xff09;【车载开发系列】UDS诊断---请求下载&#xff08;$0x34&#xff09;一.概念定义二.产生背景三.报文格式1&#xff09;请求报文2&#xff09;肯定响应3&#x…

[附源码]Nodejs计算机毕业设计基于的民宿租赁系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…

MySQL处理非结构化JSON数据(附 MyBatis-Plus 集成)

概述 MySQL 自5.7起开始支持JSON格式的非结构化数据&#xff0c;并且在8.x版本进行性能优化 关于 JSON JSON&#xff08;JavaScript Object Notation, JS对象简谱&#xff09;是一种轻量级的数据交换格式。它基于 ECMAScript&#xff08;European Computer Manufacturers Asso…

Spring Cloud Alibaba

Spring Cloud Alibaba第五部分 第二代 Spring Cloud 核心组件&#xff08;SCA&#xff09;第 1 节 Nacos 服务注册和配置中心1.1 Nacos 介绍1.2 Nacos 单例服务部署1.3 微服务注册到Nacos1.4 负载均衡1.5 Nacos 数据模型&#xff08;领域模型&#xff09;1.6 Nacos 配置中心1.6…

智能家居DIY创意之智能灯泡

一、什么是智能灯 传统的灯泡是通过手动打开和关闭开关来工作。有时&#xff0c;它们可以通过声控、触控、红外等方式进行控制&#xff0c;或者带有调光开关&#xff0c;让用户调暗或调亮灯光。 智能灯泡内置有芯片和通信模块&#xff0c;可与手机、家庭智能助手、或其他智能…

水下潜航器的建模与控制

(线性系统理论大作业) 题目 水下潜器模型&#xff0c;可能是潜艇或者鱼雷等对象。一个主推进螺旋桨&#xff0c;前后两对水平陀翼&#xff0c;后面一对垂直陀翼。   潜器前进过程中&#xff0c;通过调节助推进螺旋桨推力&#xff0c;以及三对陀翼的角度变化&#xff0c;对潜…

paddle_gpu安装配置

paddle_gpu安装配置1.确认安装版本2. 安装相关文件2.1 下载与安装3.cuDNN下载及安装4.创建conda虚拟环境5.参考教程1.确认安装版本 操作系统&#xff1a;windows安装方式:condapython版本:python3.7CUDA版本&#xff1a;本人电脑版本【11.6.134】&#xff0c;低于此版本电脑都…

傻白入门芯片设计,盘点CPU业界的顶尖人才(十四)

这篇文章主要是针对现在CPU业界的顶尖人才&#xff0c;体现为以下几点&#xff1a;提出了革命性的技术路线&#xff0c;做出了杰出的产品&#xff0c;为公司做出重要贡献。按照当前供职情况&#xff0c;根据国际巨头所在公司分类&#xff0c;我主要收集了AMD&#xff0c;其余几…

【DevOps实战系列】第八章:详解Jenkins集成Docker私服Nexus3

个人亲自录制全套DevOps系列实战教程 &#xff1a;手把手教你玩转DevOps全栈技术 Jenkins集成Docker镜像仓库 docker私服已经搭建完毕&#xff0c;下边我们期望jenkins做的事是&#xff1a; ①通过git拉取代码②通过maven构建生成jar包③构建含有jar包的镜像④推送到docker仓库…