在使用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. Spring框架之控制反转IoC(Inversion of Control)的理解

    简单理解: 控制反转就是将代码的调用权(控制权)从调用方转移给被调用方(服务提供方). 解释一下: 如果我们需要创建某个类,就需要程序员去修改代码,然后才可以得到想要的类.反转的意思就是不需要程序员去 ...

  2. C++简单实现unique_ptr

    唯一指针 管理指针的存储,提供有限的垃圾回收工具,与内置指针相比几乎没有开销(取决于所使用的删除程序). 这些对象具有获取指针所有权的能力:一旦它们获得所有权,它们就会通过在某个时候负责删除指向的对象 ...

  3. OpenHarmony社区运营报告（2023年8月）

      本月快讯 ● 2023年8月3日,OpenAtom OpenHarmony(以下简称"OpenHarmony")发布了Beta2版本.OpenHarmony 4.0 Beta2 ...

  4. winrt新dx截图最小实现

    转自:https://stackoverflow.co/questions/11283015 效果还是很不错的 #include <iostream> #include <Windo ...

  5. Python 集合（Sets）1

    集合 集合用于在单个变量中存储多个项.集合是 Python 中的 4 种内置数据类型之一,用于存储数据集合,其他 3 种是列表(List).元组(Tuple)和字典(Dictionary),它们都具有 ...

  6. Aspose.Cells使用总结大全

    引用:https://blog.csdn.net/u011555996/article/details/79000270 使用到 Aspose.Cells 插件,整理一下. 一:新建解决方案,目录如下 ...

  7. 如何保存/同步多架构容器 Docker 镜像

    前言 随着容器.芯片技术的进一步发展,以及绿色.节能.信创等方面的要求,多 CPU 架构的场景越来越常见.典型的应用场景包括: 信创:x86 服务器 + 鲲鹏 ARM 等信创服务器: 个人电脑:苹果 ...

  8. 实训篇-JavaScript-打地鼠

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

  9. gRPC入门学习之旅（七）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) gRPC入门学习之旅(六) 3.6.创建gRPC的桌面应用客 ...

  10. 力扣904(Java)-水果成篮（中等）

    题目: 你正在探访一家农场,农场从左到右种植了一排果树.这些树用一个整数数组 fruits 表示,其中 fruits[i] 是第 i 棵树上的水果 种类 . 你想要尽可能多地收集水果.然而,农场的主人 ...