前言

今天有人在QQ群里问如何把地球背景做成透明的，当时我以为Cesium比较复杂的渲染机制可能即使context设置了alpha属性也未必能透明，所以和同学说可能得改Cesium代码，可以使用ViewportQuad来实现。

后来自己实验一下，发现实际上context设置为alpha还是起作用的。。。惭愧误导了某位同学。。

最终效果

最终效果如下所示，其中背景图片时通过设置css样式background-image来实现的。

 

输入图片说明

源码

把以下代码拷贝到Cesium的Sandcastle中就能看到效果。

注意点：

1 OIT的问题

其中orderIndependentTranslucency需要设置为true，才能去掉地球表面的大气效果的黑圈问题，这个主要是因为Cesium的OIT机制会把FrameBuffer中的的透明度都改成1所致。如果不想禁用OIT的话，可以试试调整一下skyAtmosphere的几个属性值来试试。。

2 backgroundColor

backgroundColor需要设置成(0, 0, 0, 0)样式，其他颜色会影响最终效果。

js代码

var viewer = new Cesium.Viewer('cesiumContainer', {    orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true, } }, }); viewer.scene.skyBox.show = false; viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); //viewer.scene.skyAtmosphere.show = false; //viewer.scene.skyAtmosphere.brightnessShift = -0.0;

html代码

     
 
     
      
Loading...
     
 
     

---

欢迎关注 Cesium实验室 ，QQ群号：。

 

image.png