vue+cesium 天气场景——下雨、下雪

vue+cesium 天气场景——下雨、下雪

效果：

雨天场景模拟：

 雪天场景模拟：

js部分：

/*** 基础模块* @param {*} viewer*/export function Base3D(viewer) {this._viewer = viewer}/*** 雨天特效* @param {*} viewer*/Base3D.prototype.setRainEffect = function () {if (this._viewer) {var fs = "uniform sampler2D colorTexture;nvarying vec2 v_textureCoordinates;n\nfloat hash(float x){nreturn fract(sin(x*23.3)*13.13);n}n\nvoid main(){nfloat time = czm_frameNumber / 60.0;nvec2 resolution = czm_viewport.zw;nvec2 uv=(*2.-)/min(resolution.x,resolution.y);nvec3 c=vec3(.6,.7,.8);nfloat a=-.4;nfloat si=sin(a),co=cos(a);nuv*=mat2(co,-si,si,co);nuv*=length(uv+vec2(0,4.9))*.3+1.;nfloat v=1.-sin(hash(floor(uv.x*100.))*2.);nfloat b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;nc*=v*b;ngl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), 0.2);n}n";return this._viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({name: 'rainEffect',fragmentShader: fs}));}},/*** 雪天特效* @param {*} viewer*/Base3D.prototype.setSnowEffect = function () {if (this._viewer) {var fs = "uniform sampler2D colorTexture;nvarying vec2 v_textureCoordinates;n\nfloat snow(vec2 uv,float scale){nfloat time = czm_frameNumber / 60.0;nfloat w=smoothstep(1.,0.,-uv.y*(scale/10.));nif(w<.1)return 0.;nuv+=time/scale;nuv.y+=time*2./scale;nuv.x+=sin(uv.y+time*.5)/scale;nuv*=scale;nvec2 s=floor(uv),f=fract(uv),p;nfloat k=3.,d;np=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;nd=length(p);nk=min(d,k);nk=smoothstep(0.,k,sin(f.x+f.y)*0.01);nreturn k*w;n}n\nvoid main(){nvec2 resolution = czm_viewport.zw;nvec2 uv=(*2.-)/min(resolution.x,resolution.y);nvec3 finalColor=vec3(0);nfloat c = 0.0;nc+=snow(uv,30.)*.0;nc+=snow(uv,20.)*.0;nc+=snow(uv,15.)*.0;nc+=snow(uv,10.);nc+=snow(uv,8.);nc+=snow(uv,6.);nc+=snow(uv,5.);nfinalColor=(vec3(c));ngl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);n\n}n";return this._viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({name: 'snowEffect',fragmentShader: fs}));}}/*** 初始化* @param {*} initRain* @param {*} initSnow*/
Base3D.prototype.initRain = function () {this.setRainEffect();
}
Base3D.prototype.initSnow = function () {this.setSnowEffect();
}

vue调用：

//添加下雨特效this.setRainEffect=new Base3D(this.viewer);this.setRainEffect.initRain();