cesium添加下雨效果

最新推荐文章于 2024-04-19 14:32:57 发布

敲之

最新推荐文章于 2024-04-19 14:32:57 发布

阅读量297

点赞数 1

分类专栏： cesium 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41876307/article/details/130098856

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

class RainEffect {
   constructor(viewer, options) {
       if (!viewer) throw new Error('no viewer object!');
       options = options || {};
       //倾斜角度，负数向右，正数向左
       this.tiltAngle = Cesium.defaultValue(options.tiltAngle, -.6);
       this.rainSize = Cesium.defaultValue(options.rainSize, 0.3);
       this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
       this.viewer = viewer;
       this.init();
   }

   init() {
       this.rainStage = new Cesium.PostProcessStage({
           name: 'czm_rain',
           fragmentShader: this.rain(),
           uniforms: {
               tiltAngle: () => {
                   return this.tiltAngle;
               },
               rainSize: () => {
                   return this.rainSize;
               },
               rainSpeed: () => {
                   return this.rainSpeed;
               }
           }
       });
       this.viewer.scene.postProcessStages.add(this.rainStage);
   }

   destroy() {
       if (!this.viewer || !this.rainStage) return;
       this.viewer.scene.postProcessStages.remove(this.rainStage);
       this.rainStage.destroy();
       delete this.tiltAngle;
       delete this.rainSize;
       delete this.rainSpeed;
   }

   show(visible) {
       this.rainStage.enabled = visible;
   }

   rain() {
       return "uniform sampler2D colorTexture;\n\
               varying vec2 v_textureCoordinates;\n\
               uniform float tiltAngle;\n\
               uniform float rainSize;\n\
               uniform float rainSpeed;\n\
               float hash(float x) {\n\
                   return fract(sin(x * 133.3) * 13.13);\n\
               }\n\
               void main(void) {\n\
                   float time = czm_frameNumber / rainSpeed;\n\
                   vec2 resolution = czm_viewport.zw;\n\
                   vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
                   vec3 c = vec3(.6, .7, .8);\n\
                   float a = tiltAngle;\n\
                   float si = sin(a), co = cos(a);\n\
                   uv *= mat2(co, -si, si, co);\n\
                   uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
                   float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
                   float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
                   c *= v * b;\n\
                   gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
               }\n\
               ";
   }
}

Cesium.RainEffect = RainEffect;

使用：

// 引入
require('./js/rain-effect')

// 开启下雨效果
this.effect = new Cesium.RainEffect(viewer, {
  tiltAngle: -0.1, //倾斜角度
  rainSize: 0.6,   // 雨大小
  rainSpeed: 120.0 // 雨速
})

关闭下雨效果
this.effect.destroy()