在使用Cesium引擎时，我们经常要使用大屏适配导致地球或者模型的黑色天空盒和大屏的样式不匹配造成场景不好看的情况，这样就可以用到我们修改Cesium的天空为纯色背景，与大屏更适配，直接上代码。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

  <title>加载纯色背景</title>

  <script src="js/cesium1.95/Cesium.js"></script>

   <link rel="stylesheet" href="js/cesium1.95//Widgets/widgets.css"/>

  <style>

    html,

    body,

    #cesiumContainer {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

      overflow: hidden;

    }

  </style>

</head>

<body>

 <!-- 设置你需要的背景图片 -->

  <div id="cesiumContainer" class="fullSize" style="background-image: url(image/bg.jpg)"></div>

  <script>

    var viewer = new Cesium.Viewer('cesiumContainer', {

      //需要进行可视化的数据源的集合

      selectionIndicator: false,//关闭绿色点击框

      animation: false, //是否显示动画控件

      shouldAnimate: false,

      homeButton: false, //是否显示Home按钮

      fullscreenButton: false, //是否显示全屏按钮

      baseLayerPicker: false, //是否显示图层选择控件

      geocoder: false, //是否显示地名查找控件

      timeline: false, //是否显示时间线控件

      sceneModePicker: false, //是否显示投影方式控件

      navigationHelpButton: false, //是否显示帮助信息控件

      infoBox: false, //是否显示点击要素之后显示的信息

      requestRenderMode: true, //启用请求渲染模式

      scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存

      sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

      fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处

      //加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口

      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({

        url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",

      }),

      //需要纯色背景必须设置

      contextOptions: {

        webgl: {

          alpha: true,

        }

      },

    })

    //背景透明

    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

    //关闭大气

    viewer.scene.skyAtmosphere.show = false

    //抗锯齿

    viewer.scene.fxaa = true;

    viewer.scene.postProcessStages.fxaa.enabled = true;

    //关闭天空月亮

    viewer.scene.sun.show = false; //在Cesium1.6(不确定)之后的版本会显示太阳和月亮，不关闭会影响展示

    viewer.scene.moon.show = false;

    viewer.scene.skyBox.show = false;//关闭天空盒，否则会显示天空颜色

    //隐藏地球

    viewer.scene.undergroundMode = true; //重要，开启地下模式，设置基色透明，这样就看不见黑色地球了

    viewer.scene.globe.show = false; //不显示地球，这条和地球透明度选一个就可以

    viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);

    var tileset = viewer.scene.primitives.add(

                            new Cesium.Cesium3DTileset({

                                url:'http://**********/3dtile/xiaoyi_dongyi_new/tileset.json',

                                maximumScreenSpaceError: 16,//默认16,最大屏幕空间错误

                                maximumNumberOfLoadedTiles: 1000,

                                maximumMemoryUsage:1024//默认512,内存MB的最大数量

                            }));

    tileset.readyPromise.then((tileset) => {

        viewer.zoomTo(tileset);//视野定位到模型处

    });

  </script>

</body>

</html>

Cesium教程10-把影像和天空改成背景图片的更多相关文章

  1. Glide的加载图片的帮助类,用来把图片圆角或者改成圆形图片

    Glide虽然非常好用但是没找到把图片圆角的方法,所以百度了一个非常不错的加载类自己实现圆角图 感谢原文章作者:http://blog.csdn.net/weidongjian/article/det ...

  2. quick-cocos2d-x教程10:实现血条效果。

    血条是常见功能.能够通过一个血条背景和一个不断改变的血条宽度.来实现少血. 在MainScence.lua中,先改代码: function MainScene:ctor()     local bg ...

  3. node-webkit教程(10)Platform Service之File dialogs

    node-webkit教程(10)Platform Service之File dialogs 文/玄魂 目录 node-webkit教程(10)Platform Service之File dialog ...

  4. Linux pwn入门教程(10)——针对函数重定位流程的几种攻击

    作者:Tangerine@SAINTSEC 本系列的最后一篇 感谢各位看客的支持 感谢原作者的付出一直以来都有读者向笔者咨询教程系列问题,奈何该系列并非笔者所写[笔者仅为代发]且笔者功底薄弱,故无法解 ...

  5. 【译】ASP.NET MVC 5 教程 - 10：添加验证

    原文:[译]ASP.NET MVC 5 教程 - 10:添加验证 在本节中,我们将为Movie模型添加验证逻辑,并确认验证规则在用户试图使用程序创建和编辑电影时有效. DRY 原则 ASP.NET M ...

  6. [译]Vulkan教程(10)交换链

    [译]Vulkan教程(10)交换链 Vulkan does not have the concept of a "default framebuffer", hence it r ...

  7. GIS地理工具案例教程——批量合并影像-批量镶嵌栅格

    GIS地理工具案例教程--批量合并影像-批量镶嵌栅格 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 关键词:批量.迭代.循环.自动.智能.地理 ...

  8. GIS地理工具案例教程——批量合并影像

    GIS地理工具案例教程——批量合并影像 商务合作,科技咨询,版权转让:向日葵,135—4855__4328,xiexiaokui#qq.com 描述:合并目录下的所有影像 功能:对指定工作空间下的栅格 ...

  9. 黑马lavarel教程---10、lavarel模型关联

    黑马lavarel教程---10.lavarel模型关联 一.总结 一句话总结: 1.模型关联比较方便,一次定义,后面都可以使用 2.关联关系 使用动态属性进行调用 1.一对多,多对多实例? 一对多: ...

  10. Directx11教程(10) 画一个简易坐标轴

    原文:Directx11教程(10) 画一个简易坐标轴       本篇教程中,我们将在三维场景中,画一个简易的坐标轴,分别用红.绿.蓝三种颜色表示x,y,z轴的正向坐标轴. 为此,我们要先建立一个A ...

随机推荐

  1. 强！10.6K star，一款开源HTTP测试工具，适合新手，简单、容易上手！

    大家好,我是狂师! 今天给大家推荐一款开源的HTTP测试工具:Hurl,相比curl.wget功能更强大,且更容易上手.很适用新手使用. 1.项目介绍 Hurl是一个使用Rust语言开发的命令行工具, ...

  2. 11 JavaScript关于时间

    11 JavaScript关于时间 获取js的时间使用内置的Date函数完成 var d = new Date(); // 获取系统时间 // var d = new Date('2023-08-15 ...

  3. Git 删除 .gitignore 生成之前上传的文件

    清除缓存 git rm -r --cached . git add . 提交记录 git commit -m "chore: 清除缓存." git push

  4. 共筑使能千行百业的数字底座 | HDC 2022松湖对话顺利召开

     11月5日,华为开发者大会2022松湖对话在东莞松山湖凯悦酒店召开,开放原子开源基金会秘书长冯冠霖.华为终端BG软件部总裁龚体.深圳国家金融科技测评中心董事长钟剑.鸿湖万联(江苏)科技发展有限公司董 ...

  5. 配置java.library.path加载库文件

    前言:本文将告诉你Java加载dll或so库文件,配置 java.library.path路径 规避异常:java.lang.UnsatisfiedLinkError: no XXX in java. ...

  6. Nacos无法连接wsl2上部署的MySQL

    情况描述 在部署Nacos时,需要连接MySQL数据库管理数据,但是如果连接的是wsl2上部署的MySQL,使用127.0.0.1或者localhost,通常会出现如下错误: org.springfr ...

  7. CentOS 编译安装golang

    一.下载go wget https://studygolang.com/dl/golang/go1.16.4.linux-amd64.tar.gz 二.解压到指定目录 tar -xvf go1.16. ...

  8. 深入解析Rivest Cipher 4：理论与实践

    第一章:引言 密码学简介: 密码学是研究如何保护通信和信息安全的学科.它涉及加密算法.解密算法.密钥管理等内容,旨在确保信息在传输和存储过程中不被未经授权的人所获取或篡改.密码学可以分为对称加密和非对 ...

  9. mac版本vscode窗口崩溃crashed

    1.截图 出现时机 当安装依赖的时候大概率会出现,甚至安装一次依赖会出现几次 解决 具体原因未知 重新启动电脑以及退出软件都不能解决 去官网重新下载,重新安装问题解决

  10. Java实现学生投票系统

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 代码 im ...