在使用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. MarkDown常用语法Typora

    一级标题:左右分别 # 二级标题:左右分别 ## 三级标题 四级标题 五级标题 六级标题 加粗:左右分别 ** 斜体:左右分别 * 斜体加粗:左右分别 *** 删除:左右分别 ~~ "> ...

  2. Go 语言数组基础教程 - 数组的声明、初始化和使用方法

    数组用于在单个变量中存储相同类型的多个值,而不是为每个值声明单独的变量. 声明数组 在Go中,有两种声明数组的方式: 使用var关键字: 语法 var array_name = [length]dat ...

  3. Chrome浏览器前端开发调试时强制更新js、css静态资源文件缓存的方法

    以Chrome浏览器为例,国产浏览器未做全面测试.前端开发静态文件时,浏览器访问会缓存样式.图片.js等,怎么快速更新缓存. 以下方法特别适合只想清除某个网页的缓存,而不想清除全部浏览器缓存可以采用以 ...

  4. redis 简单整理——java 客户端jedis[十六]

    前言 简单介绍一下java客户端jedis. 正文 Java有很多优秀的Redis客户端(详见:http://redis.io/clients#java),这 里介绍使用较为广泛的客户端Jedis,本 ...

  5. js es6 介绍set,WeakSet

    前言 介绍一下es6 的set 和 weakset 正文 set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set ...

  6. VScode 使用emmet

    背景 在很多的编辑场合,很多时候回出现很多逻辑性的问题.可能觉得html是一门没有逻辑的语言,实际上,它是有一定的思想编辑的.后来出现了emmet,这个不仅仅是一种快捷方式,同时也是一种思考方式. 解 ...

  7. 将项目封装进docker进行迁移和使用

    首先要理解docker的基本使用,本文不做过多阐述,博主也对docker没有了解透彻. 这里列一下docker的基本命令: docker info # 查看docker信息 docker -v # 查 ...

  8. MMDeploy部署实战系列【第三章】：MMdeploy pytorch模型转换onnx，tensorrt

    MMDeploy部署实战系列[第三章]:MMdeploy pytorch模型转换onnx,tensorrt 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就 ...

  9. pageSpy - 远程调试利器

    视频版: https://www.bilibili.com/video/BV1Zi4y167TZ 前言 在工作中, 经常需要面对的问题就是处理客户提出的bug. 但是这个事儿最耗费精力甚至决定能不能修 ...

  10. Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错

    项目场景:解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述使用内网穿透时出现 invalid host header找了好多都是 ...