JT-CIM-SDK/packages/Widgets/SceneEffects/ParticleSystem.js

/**
 * 粒子效果
 * 火粒子、水粒子
 */
class ParticleSystem {
	/**
	 * 默认初始化
	 * @param {Object} viewer 三维场景
	 */
	constructor(viewer) {
		if (!viewer) throw new DeveloperError('no viewer object!');
		this.viewer = viewer;
	}
}

/**
 * 通用对外公开函数 
 */
Object.assign(ParticleSystem.prototype, /** @lends ParticleSystem.prototype */ {

	/**
	 * 创建火焰粒子
	 * @param {Array} coordinates 粒子位置 [longitude, latitude, height] 
	 */
	createParticleFire: function(coordinates) {
		this.viewer.clock.shouldAnimate = true; //是否允许动画，看到粒子效果

		// 指定喷射地点
		var position = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2] || 0);
		// 使用一个entity来作为粒子载体，比如示例中的小车
		var entity = this.viewer.entities.add({
			position: position
		});
		// 计算载体位置
		function computeModelMatrix(entity, time) {
			var position = Cesium.Property.getValueOrUndefined(entity.position);
			var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
			return modelMatrix;
		}

		var viewModel = {
			startScale: 3,
			endScale: 1.5,
			minimumParticleLife: 1.5,
			maximumParticleLife: 1.8,
			minimumSpeed: 7, //粒子发射的最小速度
			maximumSpeed: 9, //粒子发射的最大速度
			particleSize: 2,
			emissionRate: 200
		};

		var primitive = this.viewer.scene.primitives.add(
			new Cesium.ParticleSystem({
				image: "jt3dSDK/imgs/particlesystem/fire.png",
				imageSize: new Cesium.Cartesian2(viewModel.particleSize, viewModel.particleSize), //如果设置该属性，将会覆盖 minimumImageSize和maximumImageSize属性，以像素为单位缩放image的大小

				startColor: new Cesium.Color(1, 1, 1, 1), //粒子出生时的颜色
				endColor: new Cesium.Color(0.5, 0, 0, 0), //当粒子死亡时的颜色

				startScale: viewModel.startScale, //粒子出生时的比例，相对于原始大小
				endScale: viewModel.endScale, //粒子在死亡时的比例

				minimumParticleLife: viewModel.minimumParticleLife, //设置粒子寿命的可能持续时间的最小界限（以秒为单位），粒子的实际寿命将随机生成
				maximumParticleLife: viewModel.maximumParticleLife, //设置粒子寿命的可能持续时间的最大界限（以秒为单位），粒子的实际寿命将随机生成
				minimumSpeed: viewModel.minimumSpeed, //设置以米/秒为单位的最小界限，超过该最小界限，随机选择粒子的实际速度。
				maximumSpeed: viewModel.maximumSpeed, //设置以米/秒为单位的最大界限，超过该最大界限，随机选择粒子的实际速度。

				emissionRate: viewModel.emissionRate, //每秒发射的粒子数。
				lifetime: 16.0, //多长时间的粒子系统将以秒为单位发射粒子
				//粒子系统是否应该在完成时循环其爆发
				loop: true,
				//设置粒子的大小是否以米或像素为单位
				sizeInMeters: true, //AAAAAAAAAAAA
				emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)), //此系统的粒子发射器  共有 圆形、锥体、球体、长方体 ( BoxEmitter,CircleEmitter,ConeEmitter,SphereEmitter ) 几类
				modelMatrix: computeModelMatrix(entity, Cesium.JulianDate.now()), // 4x4转换矩阵，可将粒子系统从模型转换为世界坐标
			})
		);

		entity.remove = function() {
			viewer.entities.remove(entity);
			viewer.scene.primitives.remove(primitive);
		};

		return entity;
	},

	/**
	 * 创建喷水粒子
	 * @param {Array} coordinates 粒子位置 [longitude, latitude, height] 
	 */
	createParticleWater: function(coordinates) {
		let viewer = this.viewer;
		this.viewer.clock.shouldAnimate = true; //是否允许动画，看到粒子效果

		// 指定喷射地点，并实时计算位置
		var position = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2] || 0);
		// 使用一个entity来作为粒子载体，比如示例中的小车
		var entity = this.viewer.entities.add({
			position: position
		});

		//设置该粒子系统的位置
		// function computeModelMatrix(entity) {
		// 	var position = Cesium.Property.getValueOrUndefined(entity.position);
		// 	let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
		// 	return modelMatrix;
		// }
		function computeModelMatrix(entity, time) {
		  return entity.computeModelMatrix(time, new Cesium.Matrix4());
		}
		// 计算粒子发射器的位置姿态
		function computeEmitterModelMatrix() {
			let hpr = Cesium.HeadingPitchRoll.fromDegrees(viewModel.heading, viewModel.pitch, viewModel.roll); // 倾斜角度
			let trs = new Cesium.TranslationRotationScale();
			trs.translation = Cesium.Cartesian3.fromElements(0, 0, 1); // 发射高度

			trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
			let Matrix4 = Cesium.Matrix4.fromTranslationRotationScale(trs);
			return Matrix4
		}
		// 更新粒子运动状态
		function updateCallback(p, dt) {
			var gravityScratch = new Cesium.Cartesian3();
			var position = p.position;
			Cesium.Cartesian3.normalize(position, gravityScratch);
			// Cesium.Cartesian3.fromElements(20 * dt, gravityScratch.y * dt, -30 * dt, gravityScratch);
			Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);
			p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
		}
		
		// 实时计算位置
		function update(scene, time) {
		  waterParticleSystem.modelMatrix = computeModelMatrix(entity, time);
		  waterParticleSystem.emitterModelMatrix = computeEmitterModelMatrix();
		}
		viewer.scene.preUpdate.addEventListener(update);

		var viewModel = {
			startScale: 1,
			endScale: 7,
			minimumParticleLife: 6,
			maximumParticleLife: 7,
			minimumSpeed: 9,
			maximumSpeed: 9.5,
			particleSize: 1,
			emissionRate: 60.0,
			gravity: -4, //重力，上下出水方向

			// transX: 2.5,
			// transY: 4.0,
			// transZ: 1.0,
			heading: 110.0,
			pitch: 30.0,
			roll: 0.0,
			// fly: true,
			// spin: true,
			// show: true
		};

		var waterParticleSystem = new Cesium.ParticleSystem({
			//这里需要改为自己的图片路径
			image: "jt3dSDK/imgs/particlesystem/water.png",
			//设置发射出的图像大小
			imageSize: new Cesium.Cartesian2(viewModel.particleSize, viewModel.particleSize),

			startColor: new Cesium.Color(1, 1, 1, 0.6), //粒子出生时的颜色
			endColor: new Cesium.Color(0.80, 0.86, 1, 0.4), //当粒子死亡时的颜色

			// 值越大，初始时粒子图的大小越大
			startScale: viewModel.startScale,
			endScale: viewModel.endScale,
			//值越大，尾巴越长
			minimumParticleLife: viewModel.minimumParticleLife,
			maximumParticleLife: viewModel.maximumParticleLife,
			//值越大，尾巴飘的越高
			minimumSpeed: viewModel.minimumSpeed,
			maximumSpeed: viewModel.maximumSpeed,

			//每秒发射的粒子数。
			//数值越大，越浓密
			emissionRate: viewModel.emissionRate,

			//设置粒子的大小是否以米或像素为单位
			sizeInMeters: true, //AAAAAAAAAAAA
			emitter: new Cesium.CircleEmitter(0.2),
			modelMatrix: computeModelMatrix(entity),
			emitterModelMatrix: computeEmitterModelMatrix(),
			updateCallback: updateCallback,
		});
		// 将粒子系统添加到场景中
		viewer.scene.primitives.add(waterParticleSystem);

		entity.remove = function() {
			viewer.entities.remove(entity);
			viewer.scene.primitives.remove(waterParticleSystem);
		};

		return entity;
	},

});

export default ParticleSystem;