/** * 粒子效果 * 火粒子、水粒子 */ 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;