时间系统和粒子系统

一、时间系统

Cesium的时间空间Clock由两部分构成，第一部分是Animation控件，控制时间的启动和暂停。第二部分是TimeLine控件，控制时间线。如果不想显示两个控件，可以在初始化的时候都设置为false。Animation控件默认是暂停状态

var esri = new Cesium.ArcGisMapServerImageryProvider({
      url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
Cesium.Ion.defaultAccessToken = '';
const viewer = new Cesium.Viewer('yc-cesiumContainer',{
  // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
  baseLayerPicker: false,
  // 设置地图
  imageryProvider:esri,
  // 放入引入的地形,CesiumTerrainProvider方法是将地形数据，转换为Cesium可以访问的格式
  terrainProvider: new Cesium.CesiumTerrainProvider({
    // url用于放入地形服务器的地址
    url:Cesium.IonResource.fromAssetId(1),
    // 可以增加法线，用于提高光照效果
    requestVertexNormals:true,
    // 可以增加水面特效
    requestWaterMask:true
  }),
  // 不显示两个时间控件
  // animation:false,
  // timeline:false
});

// 实现初始化页面自动循环播放的效果
viewer.clock.shouldAnimate = true;
// 设定时间速率为1000 
viewer.clock.multiplier = 1000;
// 默认时间线是当前时间的24小时,设置一个新的时间线
// 用一个变量存储起始时间，使用Cesium的JulianDate计算时间差,在通过fromIso8601转成对应的格式
let start = Cesium.JulianDate.fromIso8601('2022-01-05')
let end = Cesium.JulianDate.fromIso8601('2022-01-20')
// 最后使用timeline的zoomTo方法将时间设置上去
viewer.timeline.zoomTo(start,end)

效果图：

二、粒子系统

除了动效以外，Cesium为了实现更加逼真的三维仿真模拟，还加入了粒子系统，用于实现各种特效：如烟花燃放的特效，实现天气效果的展示，车辆尾气特效等。Cesium的粒子系统是一种模拟复杂物理效应的图形技术，是有很多的小图像组成的集合，形成一个模糊对象，从而产生特效。

先加载一个飞机模型，并将视口切换到飞机处

var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,1500)
// 加载飞机模型
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0))
var entity = viewer.entities.add({
  position:position,
  orientation:orientation,
  model:{
    uri:'../../lib/models/Cesium_Air.glb',
    minimumpixelSize:100,
    maximumScale:10000,
    show:true
  }
})
// 将视口切换到飞机处
viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20),new Cesium.HeadingPitchRange(0,0,0))

火焰粒子特效：
它的核心原理就是先设置粒子样式，在通过粒子发射器发射粒子，控制粒子在一定时间内存在，然后消亡，并且使得粒子可以随着时间的推移，改变外观和行为。如果我们加载的是粒子类的数据，就需要使用primitives用于加载数据，因为其更接近底层的图形开发

// 实现初始化页面自动循环播放的效果
viewer.clock.shouldAnimate = true;
// Cesium为我们提供了ParticleSystem对象用于创建粒子系统
viewer.scene.primitives.add(new Cesium.ParticleSystem({
  // 放置粒子的样式
  image:'../../lib/SampleData/fire.png',
  // 设置粒子图片的大小
  imageSize: new Cesium.Cartesian2(20, 20),
  // 初始大小的倍数
  startScale: 1.0,
  // 消亡大小的倍数
  endScale: 4.0,
  // 每一个粒子存在的时间，可以使用minimumParticleLife和maximumParticleLife设置最小和最大时间，使得粒子随机生成生命周期
  particleLife: 1.0,
  // 发射粒子的速度
  speed: 5.0,
  // 整个粒子系统的发射器，CircleEmitter设置的是圆形发射器，0.5是圆的半径，粒子会在圆的范围内随机向上发射粒子
  // BoxEmitter:盒体发射器，并在其中设置了整个盒子的大小new Cesium.BoxEmitter(new Cesium.Cartesian3(10,10,10))
  emitter: new Cesium.CircleEmitter(0.5),
  // 每秒钟发射粒子的数量
  emissionRate: 5.0,
  // 粒子系统的位置，它将粒子系统从模型转换为世界坐标的4*4转换矩阵，要绑定到飞机模型上，所以我们使用模型的实例化对象entity
  // 并用它的computeModelMatrix方法在指定时间计算实体变换的模型矩阵，clock.startTime获取的就是时间控件中的起始时间，并在第二个参数中放入Cesuim的4*4矩阵数据
  modelMatrix: entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
  // 是粒子系统以设定的时间持续运行
  lifetime: 16.0
}))

效果图：