cesium加载3dtiles白膜，通过shader自定义材质实现渐变效果并显示动态光环

原创

已于 2022-05-11 16:30:49 修改 · 5.9k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cesium

于 2022-05-11 14:56:14 首次发布

该代码段展示了如何在Cesium的3D Tileset中应用自定义着色器，创建颜色渐变和动态光环效果。通过监听tile可见性事件，更新每个模型的片段着色器，根据位置Z坐标实现高度依赖的色彩渐变，并添加了随时间变化的光环动画效果。

关键代码：

function loadTilesShader(tileset) {
   
   
  tileset.style = new Cesium.Cesium3DTileStyle({
   
   
    color: {
   
   
      conditions: [
        ['true', 'rgba(0, 127.5, 255 ,1)']
      ]
    }
  });
  //实现渐变效果
  tileset.tileVisible.addEventListener(function (tile) {
   
   
    var content