main

分支 (1)

管理

管理

main

cesium_pdf
/
7.9材质特效篇_粒子烟花.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Particle system fireworks.">
  <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
  <title>材质特效篇_粒子烟花</title>
  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
  <script src="./Build/Cesium/Cesium.js"></script>

</head>
<style>
  html,
  body,
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>

<body>

  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, //是否显示动画工具
      timeline: false,  //是否显示时间轴工具
      fullscreenButton: false,  //是否显示全屏按钮工具
      shouldAnimate: true,  //必须开启,自动播放动画
    });


    /* Cesium.Math.setRandomNumberSeed(315); */

    //东北天到指定原点变换矩阵,将粒子系统从模型坐标转换为世界坐标
    const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
      Cesium.Cartesian3.fromDegrees(114.39664, 30.52052)
    );
    //粒子发射器高度
    const emitterInitialLocation = new Cesium.Cartesian3(0.0, 0.0, 100.0);


    //粒子贴图
    var particleCanvas;
    //绘制图形
    function getImage() {
      if (!Cesium.defined(particleCanvas)) {
        particleCanvas = document.createElement("canvas");
        particleCanvas.width = 20;
        particleCanvas.height = 20;
        const context2D = particleCanvas.getContext("2d"); // 通过 getContext方法返回一个对象，该对象提供了在 canvas 上绘图的方法和属性
        context2D.beginPath();
        //圆心x 圆心y 半径 起始角度 终止角度 逆时针
        context2D.arc(10, 10, 8, 0, Cesium.Math.TWO_PI, true);
        context2D.closePath();
        context2D.fillStyle = "rgba(255, 255, 255, 1)";
        context2D.fill();
      }
      return particleCanvas;
    }


    /* var radar = viewer.entities.add({
			rectangle: {
				coordinates: Cesium.Rectangle.fromDegrees(114.40072, 30.51952, 114.40572, 30.52452),
				material: new Cesium.ImageMaterialProperty({
					//image: new Cesium.CallbackProperty(drawCanvas, false),
					image:getImage(),
					//transparent: true
				}),
			}
		}); */


    /* const minimumExplosionSize = 30.0; //最小爆炸尺寸
    const maximumExplosionSize = 100.0;  //最大爆炸尺寸 */
    var particlePixelSize = new Cesium.Cartesian2(7.0, 7.0);  //粒子的像素大小  17就太大了
    var burstNum = 400.0;  //爆炸时粒子个数
    var lifetime = 10.0;    //粒子系统发射粒子的时间
    var numberOfFireworks = 20.0;  //设置一个周期内烟花个数

    //创建烟花函数  offset 用于计算粒子发射器偏移后的位置，color 用于定义粒子颜色，bursts为粒子爆炸的数组
    function createFirework(offset, color, bursts) {
      // 根据粒子发射器高度 emitterInitialLocation 及偏移量 offset 计算每个烟花的发射位置
      var position = Cesium.Cartesian3.add(
        emitterInitialLocation,
        offset,
        new Cesium.Cartesian3()
      );
      //从发射位置创建表示转换的Matrix4实例对象
      var emitterModelMatrix = Cesium.Matrix4.fromTranslation(position);


      //随机设置烟花的生命周期
      /* const size = Cesium.Math.randomBetween(
        minimumExplosionSize,
        maximumExplosionSize
      );
      const normalSize =
        (size - minimumExplosionSize) /
        (maximumExplosionSize - minimumExplosionSize);
      const minLife = 0.3;
      const maxLife = 1.0;
      const life = normalSize * (maxLife - minLife) + minLife; */

      // 在场景的 Primitive 集合中添加粒子系统
      viewer.scene.primitives.add(
        new Cesium.ParticleSystem({
          image: getImage(),  //粒子贴图
          startColor: color,  //粒子在其生命初期的颜色
          endColor: color.withAlpha(0.0),//粒子在其生命结束的颜色
          //particleLife: life, //粒子生命周期
          particleLife: 1, //粒子生命周期
          speed: 100.0, //粒子扩散速度
          imageSize: particlePixelSize, //粒子像素大小
          emissionRate: 0,  //每秒要发射的粒子数
          emitter: new Cesium.SphereEmitter(0.1), //系统粒子发射器类型
          bursts: bursts, //粒子爆炸,ParticleBurst 的数组
          lifetime: lifetime, //粒子系统发射粒子的时间
          //updateCallback: force,  //每帧都要调用一次回调函数以更新粒子
          modelMatrix: modelMatrix, //将粒子系统从模型转换为世界坐标的4x4转换矩阵。
          emitterModelMatrix: emitterModelMatrix,//在粒子系统局部坐标系内转换粒子系统发射器的4x4转换矩阵
          loop: true //粒子循环爆发
        })
      );
    }


    //粒子发射器在 X、Y、Z 三个方向上位置偏移量范围
    var xMin = -100.0;
    var xMax = 100.0;
    var yMin = -80.0;
    var yMax = 100.0;
    var zMin = -50.0;
    var zMax = 50.0;

    //设置随机颜色选项数组 对象中有的 RGB 属性名称为 minimumRed、minimumGreen 或 minimumBlue，表示该颜色分量将随机生成一个不大于该值的值
    var colorOptions = [
      {
        minimumRed: 0.75,
        green: 0.0,
        minimumBlue: 0.8,
        alpha: 1.0,
      },
      {
        red: 0.0,
        minimumGreen: 0.75,
        minimumBlue: 0.8,
        alpha: 1.0,
      },
      {
        red: 0.0,
        green: 0.0,
        minimumBlue: 0.8,
        alpha: 1.0,
      },
      {
        minimumRed: 0.75,
        minimumGreen: 0.75,
        blue: 0.0,
        alpha: 1.0,
      },
    ];

    //创建烟花  使用 for 循环计算每个粒子发射器的位置偏移量、烟花的颜色及粒子爆炸的 ParticleBurst 数组。
    for (let i = 0; i < numberOfFireworks; ++i) {
      // 粒子发射器的偏移量
      var x = Cesium.Math.randomBetween(xMin, xMax);
      var y = Cesium.Math.randomBetween(yMin, yMax);
      var z = Cesium.Math.randomBetween(zMin, zMax);
      var offset = new Cesium.Cartesian3(x, y, z);
      //使用提供的选项创建随机颜色
      var color = Cesium.Color.fromRandom(
        colorOptions[i % colorOptions.length]
      );
      //粒子爆炸,ParticleBurst 的数组,在周期时间发射粒子爆发
      var bursts = [];
      for (let j = 0; j < 3; ++j) {
        bursts.push(
          new Cesium.ParticleBurst({
            time: Cesium.Math.nextRandomNumber() * lifetime, //粒子系统生命周期开始后以秒为单位的时间，将发生爆发
            minimum: burstNum, //爆发中发射的最小粒子数。
            maximum: burstNum, //爆发中发射的最大粒子数。
          })
        );
      }
      //传参，创建烟花
      createFirework(offset, color, bursts);
    }


    viewer.scene.camera.setView({
      destination:
        Cesium.Cartesian3.fromDegrees(114.39664, 30.52052, 2000)
    })


  </script>
</body>

</html>