cesium 粒子系统

2021-11-05 14:02:11 阅读：188 来源： 互联网

标签：粒子系统粒子 Cartesian3 viewModel Cesium var cesium new

<!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>

标签：粒子系统,粒子,Cartesian3,viewModel,Cesium,var,cesium,new
来源： https://blog.csdn.net/qq_40892406/article/details/121161545

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium 粒子系统