美文网首页Cesium
Cesium 粒子系统 ParticleSystem

Cesium 粒子系统 ParticleSystem

作者: WebGiser | 来源:发表于2022-02-23 16:39 被阅读0次

    雪花示例

              // 创建粒子系统
              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

    相关文章

      网友评论

        本文标题:Cesium 粒子系统 ParticleSystem

        本文链接:https://www.haomeiwen.com/subject/inbolrtx.html