Skip to content

粒子系统

粒子系统是一种图形技术,可以模拟复杂的物理效果。通过使用诸如初始位置、速度和寿命等属性指定单个粒子的行为,可以控制这些复杂的效果。

粒子系统效应在电影和电子游戏中很常见。例如,为了表示飞机的损坏,技术艺术家可以使用粒子系统来表示飞机引擎上的爆炸,然后渲染不同的粒子系统,表示飞机坠毁时的烟雾轨迹。

加载飞机模型:

js
onMounted(async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    baseLayerPicker: false,
    shouldAnimate: true, 	// 飞机动画
    shadows: true 			// 飞机阴影
  });
});

const position = Cesium.Cartesian3.fromDegrees(114, 30, 200);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
  position,
  Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)
);

const entity = viewer.entities.add({
  position,
  orientation,
  model: {
    uri: "/glb/Cesium_Air.glb",
    minimumPixelSize: 200,
    maximumScale: 5000
  }
});
viewer.trackedEntity = entity;

加载失火的粒子动画:

js
viewer.scene.primitives.add(
  new Cesium.ParticleSystem({
    image: "/SampleData/fire.png",
    imageSize: new Cesium.Cartesian2(20, 20),
    startScale: 1, 		// 开始大小
    endScale: 6, 		// 结束大小
    particleLife: 3, 	// 粒子存在的时间
    speed: 5, 			// 粒子的发射速度
    emissionRate: 5, 	// 粒子发射数量
    emitter: new Cesium.CircleEmitter(2), 								  // 圆形发射器
    // emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10, 10, 10)), // 方形四周发射器
    // emitter: new Cesium.SphereEmitter(3), 							  // 球形发射器
    // emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30)), 		  // 锥形发射器
    modelMatrix: entity.computeModelMatrix(
      viewer.clock.startTime, 	// 时间控件中的开始时间
      new Cesium.Matrix4() 		// 4 x 4矩阵数据
    )
    // lifetime: 4, 			// 燃烧时间
    // loop: false  			// 只燃烧一次
  })
);

Released under the MIT License.