Cesium

Cesium 粒子系统 ParticleSystem

2022-02-23  本文已影响0人  WebGiser

雪花示例

          // 创建粒子系统
          createParticleSystem() {
                this.resetCamera();
                let snowRadius = 100000.0;
                let snowGravityScratch = new Cesium.Cartesian3();
                let snowSystem = new Cesium.ParticleSystem({
                    // 是否多轮循环(默认:true)
                    loop: true,
                    // 模型矩阵:将粒子系统从模型坐标系转换到世界坐标系
                    modelMatrix: new Cesium.Matrix4.fromTranslation(
                        viewer.scene.camera.position
                    ),
                    // 设置粒子移动的最小速度(单位:m/s)
                    minimumSpeed: 0.0,
                    // 设置粒子移动的最大速度(单位:m/s)
                    maximumSpeed: 10.0,
                    // 粒子系统将会发射粒子多久(单位:秒)
                    lifetime: 5,
                    // 粒子发射器
                    emitter: new Cesium.SphereEmitter(snowRadius),
                    // 粒子的最小生存时间(单位:秒)
                    minimumParticleLife: 0,
                    // 粒子的最大生存时间(单位:秒)
                    maximumParticleLife: 5, 
                    // 粒子图片初始化时的比例大小
                    startScale: 0.5,
                    // 粒子图片销毁时的比例大小
                    endScale: 1.5,
                    // 粒子初始化时的颜色
                    startColor: Cesium.Color.WHITE.withAlpha(0.0),
                    // 粒子销毁时的颜色
                    endColor: Cesium.Color.WHITE.withAlpha(1.0),
                    // 设置粒子图片
                    image: "image/snowflake_particle.png",
                    // 每秒钟发射的粒子个数(默认5)
                    emissionRate: 1000,
                    // 设置粒子图片大小的下限,在这之上,随机缩放粒子图片大小
                    minimumImageSize: new Cesium.Cartesian2(12, 12),
                    // 设置粒子图片大小的上限,在这之下,随机缩放粒子图片大小
                    maximumImageSize: new Cesium.Cartesian2(24, 24),
                    // 粒子的最小质量(单位:千克)
                    minimumMass: 1.0,
                    // 粒子的最大质量(单位:千克)
                    maximumMass: 5.0,
                    // 粒子的更新函数: 每一帧都会调用,用来更新粒子的分布、移动、可视化
                    // particle单个粒子,dt距上次更新的时间(单位:秒)
                    updateCallback: function(particle, dt) {
                        // 1、将粒子坐标归一化到(-1,1),公式为:x = 开平方(x²+y²+z²)
                        snowGravityScratch = Cesium.Cartesian3.normalize(
                            particle.position,
                            snowGravityScratch
                        );
                        // 2、将归一化后的粒子坐标扩大n倍
                        Cesium.Cartesian3.multiplyByScalar(
                            snowGravityScratch,
                            Cesium.Math.randomBetween(-30.0, -300.0),
                            snowGravityScratch
                        );
                        
                        // 3、粒子的速度矢量 = 粒子原始的速度矢量(随机生成的)+(归一化和扩大化后的坐标)
                        particle.velocity = Cesium.Cartesian3.add(
                            particle.velocity,
                            snowGravityScratch,
                            particle.velocity
                        );
                        // 4、计算粒子与镜头camera之间的距离。
                        // 粒子的透明度与距离成比例。超出一定的阈值后,透明度设置为0
                        let distance = Cesium.Cartesian3.distance(
                            viewer.scene.camera.position,
                            particle.position
                        );
                        if (distance > snowRadius) {
                            particle.endColor.alpha = 0.0;
                        } else {
                            // particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
                            particle.endColor.alpha = snowSystem.endColor.alpha - (distance / snowRadius);
                        }
                    }
                });
                viewer.scene.primitives.add(snowSystem);
            },
            // 设置镜头
            resetCamera() {
                viewer.scene.camera.setView({
                    destination: new Cesium.Cartesian3.fromDegrees(115, 35, 50000),
                    orientation: {
                        heading: 0,
                        pitch: Cesium.Math.toRadians(-15),
                        roll: 0
                    }
                })
            },
1645603331(1).png
上一篇下一篇

猜你喜欢

热点阅读