Cesium下雪效果

该博客介绍了一个Cesium的雪景效果类代码,通过PostProcessStage实现粒子效果,模拟下雪场景。用户可以调整雪的大小和速度。在页面中引入此JS,创建SnowEffect实例并传入viewer对象,即可为Cesium场景添加逼真的雪景效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 下雪效果的类代码:

class SnowEffect {
    constructor(viewer, options) {
        if (!viewer) throw new Error('no viewer object!');
        options = options || {};
        this.snowSize = Cesium.defaultValue(options.snowSize, 0.02); //最好小于0.02
        this.snowSpeed = Cesium.defaultValue(options.snowSpeed, 60.0);
        this.viewer = viewer;
        this.init();
    }

    init() {
        this.snowStage = new Cesium.PostProcessStage({
            name: 'czm_snow',
            fragmentShader: this.snow(),
            uniforms: {
                snowSize: () => {
                    return this.snowSize;
                },
                snowSpeed: () => {
                    return this.snowSpeed;
                }
            }
        });
        this.viewer.scene.postProcessStages.add(this.snowStage);
    }

    destroy() {
        if (!this.viewer || !this.snowStage) return;
        this.viewer.scene.postProcessStages.remove(this.snowStage);
        this.snowStage.destroy();
        delete this.snowSize;
        delete this.snowSpeed;
    }

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

    snow() {
        return "uniform sampler2D colorTexture;\n\
            varying vec2 v_textureCoordinates;\n\
            uniform float snowSpeed;\n\
                    uniform float snowSize;\n\
            float snow(vec2 uv,float scale)\n\
            {\n\
                float time=czm_frameNumber/snowSpeed;\n\
                float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
                uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
                uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
                p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
                k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
                return k*w;\n\
            }\n\
            void main(void){\n\
                vec2 resolution=czm_viewport.zw;\n\
                vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                vec3 finalColor=vec3(0);\n\
                //float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
                float c=0.;\n\
                c+=snow(uv,30.)*.0;\n\
                c+=snow(uv,20.)*.0;\n\
                c+=snow(uv,15.)*.0;\n\
                c+=snow(uv,10.);\n\
                c+=snow(uv,8.);\n\
                c+=snow(uv,6.);\n\
                c+=snow(uv,5.);\n\
                finalColor=(vec3(c));\n\
                gl_FragColor=mix(texture2D(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
                }\n\
                ";
    }
}

Cesium.SnowEffect = SnowEffect;

2. 页面使用方式

引入上面的js即可

new Cesium.SnowEffect(viewer, {
            snowSize: 0.02, //雪大小 ,默认可不写
            snowSpeed: 60.0 //雪速,默认可不写
        });

3.效果图

在这里插入图片描述

### Cesium实现特定矩形区域内下雪效果 要在 Cesium实现特定矩形区域内的下雪效果,可以结合使用 `Cesium.ParticleSystem` 和地理坐标范围来限定雪花的生成区域。以下是具体方法: #### 1. 创建粒子系统 通过创建一个自定义的粒子系统并将其添加到场景中,模拟雪花飘落的效果。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); // 定义目标矩形区域 (west, south, east, north) const rectangleCoordinates = Cesium.Rectangle.fromDegrees( 116.3, // west 经度最小值 39.8, // south 纬度最小值 116.5, // east 经度最大值 40.0 // north 纬度最大值 ); // 添加粒子系统 const snowParticleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: './snowflake.png', // 雪花纹理图片路径 startScale: 1.0, endScale: 0.5, minimumParticleLife: 5.0, maximumParticleLife: 10.0, speed: 2.0, emissionRate: 50, startColor: Cesium.Color.WHITE.withAlpha(0.7), endColor: Cesium.Color.WHITE.withAlpha(0.0), modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Rectangle.center(rectangleCoordinates)), // 设置中心点 })); viewer.zoomTo(snowParticleSystem); ``` 上述代码片段展示了如何初始化一个粒子系统,并指定其参数以模仿雪花的行为[^1]。 #### 2. 控制粒子生成范围 为了使粒子仅在特定矩形区域内生成,可以通过调整粒子系统的发射器属性以及初始位置分布逻辑完成此功能。例如,在粒子系统中设置随机化的起始位置时,应确保这些位置位于所定义的矩形边界内。 ```javascript function getRandomPositionInRectangle(rect) { const lon = Cesium.Math.nextRandomBetween(rect.west, rect.east); // 随机经度 const lat = Cesium.Math.nextRandomBetween(rect.south, rect.north); // 随机纬度 return Cesium.Cartesian3.fromDegrees(lon, lat, 1000); // 海拔高度设为 1km 左右 } snowParticleSystem.emitter = function() { return getRandomPositionInRectangle(rectangleCoordinates); }; ``` 这段脚本实现了基于给定矩形坐标的随机化粒子起点分配机制[^2]。 #### 3. 调整视觉表现 为了让降雪看起来更自然,还可以进一步优化以下几个方面: - **大小变化**:让每颗雪花具有不同的尺寸。 - **旋转角度**:引入轻微的角度偏移使得雪花不会完全垂直落下。 - **透明度渐变**:当接近地面时逐渐消失。 以上改进可通过修改粒子系统的相关属性达成。 --- ### 总结 综上所述,借助于 Cesium 的 Particle System 功能模块,配合合理的参数设定与空间约束条件,能够成功构建出局限于某固定矩形地域之上的动态降雪景象。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HappyPort

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值