cesium 粒子系统

2024-01-08 14:59:10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <link href="../Cesium/Widgets/widgets.css" rel="stylesheet" />
  <script src="../Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script>
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZWVhNjZkZS0yZDgzLTRhZGEtOGJkYS1iMWUxNmM3NzNmNmUiLCJpZCI6NjM1MzEsImlhdCI6MTYyODIyNzYyMn0.Swb3G8ZboOXzXXiMLjEXIErFjXXZmbZrFIKXCxtIxnQ';
  var viewer = new Cesium.Viewer("cesiumContainer");
  Cesium.Math.setRandomNumberSeed(3);
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束
  viewer.clock.multiplier = 1;
  viewer.clock.shouldAnimate = true;
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117, 39, 50)
  });
  //修改参数 看http://cesium.xin/cesium/cn/Documentation1.72/ParticleSystem.html?classFilter=ParticleSystem
  var viewModel = {
    emissionRate:310,
    gravity: 28,
    minimumParticleLife: 0.5,
    maximumParticleLife: 0.6,
    minimumSpeed: 30,
    maximumSpeed: 26,
    startScale: 1,
    endScale: 10,
    particleSize:5,
  };
  // Cesium.knockout.track(viewModel);
  var entityPosition = new Cesium.Cartesian3();
  var entityOrientation = new Cesium.Quaternion();
  var rotationMatrix = new Cesium.Matrix3();
  var modelMatrix = new Cesium.Matrix4();

  function computeModelMatrix(entity, time) {
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
  }

  var emitterModelMatrix = new Cesium.Matrix4();
  var translation = new Cesium.Cartesian3();
  var rotation = new Cesium.Quaternion();
  var hpr = new Cesium.HeadingPitchRoll();
  var trs = new Cesium.TranslationRotationScale();

  function computeEmitterModelMatrix() {
    //控制粒子发射的方向
    hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0, hpr);
    trs.translation = Cesium.Cartesian3.fromElements(
            -4.0,
            0.0,
            1.4,
            translation
    );
    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

    return Cesium.Matrix4.fromTranslationRotationScale(
            trs,
            emitterModelMatrix
    );
  }
  var entity = viewer.entities.add({
    model: {
      // minimumPixelSize: 64,
    },
    //控制位偏移
    viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
    // 控制粒子的位置
    position: Cesium.Cartesian3.fromDegrees(117, 39, 5),
  });
  var scene = viewer.scene;
  var particleSystem = scene.primitives.add(
          new Cesium.ParticleSystem({
            // 用于广告牌的URI，HTMLImageElement或HTMLCanvasElement。
            // image: "../Cesium/Assets/Textures/waterNormals.jpg",
            image: "img_1.png",
            //粒子在其生命初期的颜色。
            startColor: Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
            // 粒子寿命结束时的颜色。
            endColor: Cesium.Color.WHITE.withAlpha(0.0),
            // 在粒子寿命开始时应用于粒子图像的初始比例。
            startScale: viewModel.startScale,
            // 在粒子寿命结束时应用于粒子图像的最终比例。
            endScale: viewModel.endScale,
            // 设置以秒为单位的粒子生命的可能持续时间的最小范围，在该时间范围内可以随机选择粒子的实际生命。
            minimumParticleLife: viewModel.minimumParticleLife,
            //设置粒子寿命的可能持续时间的最大限制（以秒为单位），在该范围内将随机选择粒子的实际寿命。
            maximumParticleLife: viewModel.maximumParticleLife,
            //设置以米/秒为单位的最小界限，高于该界限时，将随机选择粒子的实际速度。
            minimumSpeed: viewModel.minimumSpeed,
            // 设置以米/秒为单位的最大范围，在该范围内将随机选择粒子的实际速度。
            maximumSpeed: viewModel.maximumSpeed,
            // 如果设置，则将覆盖用来缩放粒子图像尺寸（以像素为单位）的minimumImageSize和maximumImageSize输入。
            imageSize: new Cesium.Cartesian2(
                    viewModel.particleSize,
                    viewModel.particleSize
            ),
            // 每秒要发射的粒子数。
            emissionRate: viewModel.emissionRate,
            // ParticleBurst 的数组，在周期性的时间发射粒子爆发。
            bursts: [
              //这些脉冲偶尔会同步以产生多色效果
              new Cesium.ParticleBurst({
                time:0.1,
                minimum: 10,
                maximum: 100,
              }),
              new Cesium.ParticleBurst({
                time:0.2,
                minimum: 50,
                maximum: 100,
              }),
              new Cesium.ParticleBurst({
                time: 0.3,
                minimum: 200,
                maximum: 300,
              }),
            ],
            // 粒子系统发射粒子的时间（以秒为单位）。
            lifetime: 0.5,
            // 为此的粒子发射器（这里发射形式cesium官方有四种，可根据实际切换或开发）
            emitter: new Cesium.CircleEmitter(0.5),
  // {
            //emitter: new Cesium.CircleEmitter(2.0),
            // emitter:new Cesium.SphereEmitter(2.5),
            // emitter:new Cesium.ConeEmitter(
            //         Cesium.Math.toRadians(45.0)
            // ),
            // emitter:new Cesium.BoxEmitter(
            //         new Cesium.Cartesian3(10.0, 10.0, 10.0)
            // ),
  // }
            // 4x4转换矩阵，用于转换粒子系统局部坐标系内的粒子系统发射器。
            emitterModelMatrix: computeEmitterModelMatrix(),
            // 每帧都要调用一次回调函数以更新粒子。（控制粒子的变化）
            updateCallback: applyGravity,
          })
  );
  var gravityScratch = new Cesium.Cartesian3();
  function applyGravity(p, dt) {
    // 我们需要为地心空间中的每个粒子计算一个局部上方向向量
    var position = p.position;

    Cesium.Cartesian3.normalize(position, gravityScratch);
    Cesium.Cartesian3.multiplyByScalar(
            gravityScratch,
            viewModel.gravity * dt,
            gravityScratch
    );
    p.velocity = Cesium.Cartesian3.add(
            p.velocity,
            gravityScratch,
            p.velocity
    );
  }
  viewer.scene.preUpdate.addEventListener(function (scene, time) {
    particleSystem.modelMatrix = computeModelMatrix(entity, time);
    // 说明对发射器模型矩阵的任何更改
    particleSystem.emitterModelMatrix = computeEmitterModelMatrix();
  });

</script>


</body>
</html>
码农公寓

相关文章
