在使用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. 【mybatis踩坑】mybatis获取类型为字符串String的参数自动加引号

    今天写了一个简单的测试例子,用mybatis实现新建一个MySQL数据表 整体是JavaWeb项目,下面的代码是不完整的. 这是mapper 1 <?xml version="1.0& ...

  2. Emgucv以及debugVisualizer下载

    1.Emgucv官网 https://www.emgu.com/ Github-- https://github.com/emgucv/ 在release 包中找到对应系统的版本 例如: libemg ...

  3. 【VMware vSAN】创建vSAN Max集群并配置挂载远程数据存储。

    VMware Explore 2023大会上,VMware正式发布了vSAN Max,这是VMware的一种全新分解存储架构,可以为vSphere集群提供PB级分解存储.vSAN Max是基于vSAN ...

  4. #Kruskal，分治#AT4569 Connecting Cities

    题目传送门 考虑如何去掉这个绝对值, 换句话说,如何减少边数并且能建出 MST. 在求解偏序问题时,往往会分而治之, 这样原来 \(O(n^2)\) 的做法就能够被优化. 考虑将所有点对半折开, 左半 ...

  5. C/C++ 项目构建指南：如何使用 Makefile 提高开发效率

    Makefile是一个常用的自动化构建工具,它可以为开发人员提供方便的项目构建方式.在C/C++项目中,Makefile可以用来编译.链接和生成可执行文件.使用Makefile的好处是可以自动执行一系 ...

  6. Blocks—单调栈

    思路: 题目意思是求平均数>=k的最长序列先求出a[i]-k的前缀和就是求sum[i]-sum[j]>=0的最大i-j当j<=k<=isum[j]<=sum[k]j< ...

  7. 实训篇-Html-注册页面【简单】

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. vue+scss混合(mixins)使用(css代码的vuex(公共管理))

    scss混合(mixins)使用 例一.使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式. 1.创建mixins.scss文件 //文本n行溢出隐藏 @mixin ellipsisBa ...

  9. 第五章：SQL高级处理

    第五章:SQL高级处理 5.1 窗口函数 5.1.1 窗口函数概念及基本的使用方法 窗口函数也称为OLAP函数.OLAP 是 OnLine AnalyticalProcessing 的简称,意思是对数 ...

  10. 最佳实践：使用阿里云CDN加速OSS访问

    简介: 用户直接访问OSS资源,访问速度会受到OSS的下行带宽以及Bucket地域的限制.如果通过CDN来访问OSS资源,带宽上限更高,并且可以将OSS的资源缓存至就近的CDN节点,通过CDN节点进行 ...