场景背景修改

在进行WebGL开发时,有时候我们希望能够做更多绚丽的效果,例如希望将三维球的天空盒子修改为黑色,或者是将天空盒子透明。
首先我们来看两个效果
效果一:三维球背景纯黑色

背景存黑

效果二:三维球天空盒子透明,背景颜色依赖于下一层的div,可以是渐变色,或者图片。本图效果用了渐变色
透明的天空盒子

一、背景纯黑的设置

viewer.scene.skyBox.show=false;

一句话就能搞定,别这么看着我,就是这么简单!

二、将天空盒子透明

viewer = new Cesium.Viewer("cesiumContainer", {
      //设置为了去掉天空盒子/////
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      }
    });
    scene = viewer.scene;
    scene.skyBox.show = false;
    scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

设置contextOptions就能搞定,其中orderIndependentTranslucency需要设置为true,才能去掉地球表面的大气效果的黑圈问题,赶紧试试吧!

三、去掉三维地球

viewer.scene.globe.show=false;
viewer.scene.skyAtmosphere.show=false;

文末彩蛋:

$(".cesium-widget-credits").hide();

这句代码可以去掉SuperMap的这个红色logo


logo

修改地下颜色

viewer.scene.undergroundMode = true; 
 viewer.scene.globe.globeAlpha = 0; 
 viewer.scene.underGlobe.baseColor = new Cesium.Color(1.0, 1.0, 0.0, 0.0);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容