粒子传输特效

image.png

本效果结合网上案例，采用ceisum结合vue实现信号传输特效（粒子特效），仅供记录学习。性能欠佳，希望大佬指教，代码如下：

<template>
<div id="cesiumContainer"></div>
</template>

<script>
import Cesium from "cesium/Cesium";
import widget from "cesium/Widgets/widgets.css";
export default {
name: "CesiumScene",
data() {
return {
sourEntity: null,
tarEntity: null,
timeId:null
};
},
mounted() {
this.init();
this.createSourEntity();
this.createTarEntity();
this.createLeidaEntity();
this.createRadarToMoon();
},
created() {},
beforeDestroy() {},
methods: {
init() {
let viewerOption = {
geocoder: false, // 地理位置查询定位控件
homeButton: false, // 默认相机位置控件
timeline: false, // 时间滚动条控件
navigationHelpButton: false, // 默认的相机控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
baseLayerPicker: false, // 底图切换控件
shouldAnimate: true, //是否开始动画
// useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
selectionIndicator: true, //是否显示选取指示器组件
// targetFrameRate:60,
vrButton: true,
showRenderLoopErrors: true,
requestAnimationFrame: true,
// showRenderLoopErrors : false,

    animation: false // 控制场景动画的播放速度控件
  };
  this.Global.viewer = new Cesium.Viewer(this.$el, viewerOption);
  this.Global.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
  this.Global.viewer.scene.debugShowFramesPerSecond = true;
},
createTarEntity() {
  var self = this;
  var hpRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
  // 添加模型
  this.tarEntity = this.Global.viewer.entities.add({
    // 模型父级
    parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(118.54, 23.51, 0),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/junjian/junjian.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
createLeidaEntity() {
  var self = this;
  var hpRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
  // 添加模型
  this.tarEntity = this.Global.viewer.entities.add({
    // 模型父级
    parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(120.54, 18.51, 0),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/leida/leida.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
createSourEntity() {
  var self = this;

  // 添加模型
  this.sourEntity = this.Global.viewer.entities.add({
    // 模型父级
    // parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(115.54, 20.51, 500000),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/weixing_1.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
getImage() {
  // 画一个用于粒子显示的canves图像
  var particleCanvas;
  if (!Cesium.defined(particleCanvas)) {
    particleCanvas = document.createElement("canvas");
    particleCanvas.width = 20;
    particleCanvas.height = 20;
    var context2D = particleCanvas.getContext("2d");
    context2D.beginPath();
    context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
    context2D.closePath();
    context2D.fillStyle = "rgb(255, 255, 255)";
    context2D.fill();
  }
  return particleCanvas;
},

createParticleSystems(options, systemsArray) {
  var itemRadar = [],
    self = this;
  var scratchOffset = new Cesium.Cartesian3();
  var matrix4Scratch = new Cesium.Matrix4();
  //创建很多个粒子系统
  var length = options.numberOfSystems; //创建的长度
  for (var i = 0; i < length; ++i) {
    var scratchAngleForOffset =
      (Math.PI * 2.0 * i) / options.numberOfSystems; //一圈粒子的不同大小
    scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
    scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
    scratchOffset.z +=
      options.baseRadius * Math.cos(scratchAngleForOffset / 2);

    var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
      scratchOffset,
      matrix4Scratch
    );
    var color = Cesium.Color.RED; //取一个随机颜色
    //  var color = Cesium.Color.AQUAMARINE//取天蓝色
    var force = this.forceFunction(options, i);

    itemRadar = this.Global.viewer.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: self.getImage(),
        startColor: color,
        endColor: color,
        particleLife: 50,
        speed: 1,
        imageSize: new Cesium.Cartesian2(5.0, 5.0),
        emissionRate: 3.0,
        emitter: new Cesium.CircleEmitter(0.1),
        lifetime: 100,
        updateCallback: force,
        modelMatrix: self.particlesModelMatrix(),
        emitterModelMatrix: emitterModelMatrix
      })
    );
    systemsArray.push(itemRadar);
  }
},
forceFunction(options, iteration) {
  // console.log(options,"参数显示")
  return function(particle, dt) {
    // console.log(particle,"canshuxianshi")
    //光学传感器粒子位置更新函数
    var positionC = new Cesium.Cartesian3();
    var positionD = new Cesium.Cartesian3();
    dt = Cesium.Math.clamp(dt, 0.0, 1); //每次更新时间间隔
    //下面是向量计算
    var positionA = particle.position;
    var positionB = Cesium.Cartesian3.fromDegrees(118.54, 23.51, 5000);

    var positionC = Cesium.Cartesian3.multiplyByScalar(
      positionA,
      0.9,
      positionC
    );

    var positionD = Cesium.Cartesian3.multiplyByScalar(
      positionB,
      0.1,
      positionD
    );

    particle.position = Cesium.Cartesian3.add(
      positionC,
      positionD,
      particle.position
    );
  };
},
particlesModelMatrix() {
  var particlesModelMatrix;
  var planePosition = Cesium.Cartesian3.fromDegrees(
      -75.59777,
      40.03883,
      800.0
    ),
    particlesOffset = new Cesium.Cartesian3(
      -8.950115473940969,
      34.852766731753945,
      -30.235411095432937
    ),
    translationOffset = Cesium.Matrix4.fromTranslation(
      particlesOffset,
      new Cesium.Matrix4()
    ),
    translationOfPlane = Cesium.Matrix4.fromTranslation(
      planePosition,
      new Cesium.Matrix4()
    ),
    particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
      translationOfPlane,
      translationOffset,
      new Cesium.Matrix4()
    );
  return particlesModelMatrix;
},
createParticleSystems1(options,OpticSystems) {
  var itemRadar = [], self = this;
   
  var scratchOffset = new Cesium.Cartesian3();
  var matrix4Scratch = new Cesium.Matrix4();
  //创建很多个粒子系统
  var length = options.numberOfSystems; //创建的长度
  for (var i = 0; i < length; ++i) {
    var scratchAngleForOffset =
      (Math.PI * 2.0 * i) / options.numberOfSystems; //一圈粒子的不同大小
    scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
    scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
    scratchOffset.z +=
      options.baseRadius * Math.cos(scratchAngleForOffset / 2);

    var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
      scratchOffset,
      matrix4Scratch
    );
    var color = Cesium.Color.BLUE; //取一个随机颜色
    //  var color = Cesium.Color.AQUAMARINE//取天蓝色
    var force = this.forceFunction1(options, i);

    itemRadar = this.Global.viewer.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: self.getImage(),
        startColor: color,
        endColor: color,
        particleLife: 50,
        speed: 1,
        imageSize: new Cesium.Cartesian2(5.0, 5.0),
        emissionRate: 3.0,
        emitter: new Cesium.CircleEmitter(0.1),
        lifetime: 100,
        updateCallback: force,
        modelMatrix: self.particlesModelMatrix1(),
        emitterModelMatrix: emitterModelMatrix
      })
    );
    OpticSystems.push(itemRadar);
  }
},
forceFunction1(options, iteration) {
  // console.log(options,"参数显示")
  return function(particle, dt) {
    // console.log(particle,"canshuxianshi")
    //光学传感器粒子位置更新函数
    var positionC = new Cesium.Cartesian3();
    var positionD = new Cesium.Cartesian3();
    dt = Cesium.Math.clamp(dt, 0.0, 1); //每次更新时间间隔
    //下面是向量计算
    var positionA = particle.position;
    var positionB = Cesium.Cartesian3.fromDegrees(   
    120.54,
    18.51,
    5000);

    var positionC = Cesium.Cartesian3.multiplyByScalar(
      positionA,
      0.9,
      positionC
    );

    var positionD = Cesium.Cartesian3.multiplyByScalar(
      positionB,
      0.1,
      positionD
    );

    particle.position = Cesium.Cartesian3.add(
      positionC,
      positionD,
      particle.position
    );
  };
},
particlesModelMatrix1() {
  var particlesModelMatrix1;
  var planePosition = Cesium.Cartesian3.fromDegrees(
      120.54,
      18.51,
      0
    ),
    particlesOffset = new Cesium.Cartesian3(
      -8.950115473940969,
      34.852766731753945,
      -30.235411095432937
    ),
    translationOffset = Cesium.Matrix4.fromTranslation(
      particlesOffset,
      new Cesium.Matrix4()
    ),
    translationOfPlane = Cesium.Matrix4.fromTranslation(
      planePosition,
      new Cesium.Matrix4()
    ),
    particlesModelMatrix1 = Cesium.Matrix4.multiplyTransformation(
      translationOfPlane,
      translationOffset,
      new Cesium.Matrix4()
    );
  return particlesModelMatrix1;
},
createRadarToMoon() {
  //关于粒子的一些属性项
  //光学粒子属性
  var self = this;
  var Optics_options = {
    numberOfSystems: 12,
    iterationOffset: 0.1,
    cartographicStep: 0.00000001,
    baseRadius: 3000 //初始圆形的半径
  };
  // 雷达粒子属性
  let Radar_options = {
    numberOfSystems: 12, //用很多粒子组成一个形状，这里让其组成一个圆形
    iterationOffset: 0.1,
    cartographicStep: 0.00000001,
    baseRadius: 3000 //初始圆形的半径
  };
  var RadarSystems = [],OpticSystems=[];
  var flag = true;

  this.createParticleSystems(Radar_options, RadarSystems);
  this.createParticleSystems1(Optics_options,OpticSystems );
  var scene = this.Global.viewer.scene;
  var r = 0;
  var center = new Cesium.Cartesian3();
  var hpRoll = new Cesium.HeadingPitchRoll();
  var hpRange = new Cesium.HeadingPitchRange();
  var speed = 500; //飞行速度
  var position = Cesium.Cartesian3.fromDegrees(115.54, 20.51, 470000); //飞机初始位置

  var speedVector = new Cesium.Cartesian3(); //速度向量
  var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
    "north",
    "west"
  ); //坐标系
  this.Global.viewer.scene.preUpdate.addEventListener(function(
    scene,
    time
  ) {
    speedVector = Cesium.Cartesian3.multiplyByScalar(
      Cesium.Cartesian3.UNIT_X,
      speed / 10,
      speedVector
    );
    position = Cesium.Matrix4.multiplyByPoint(
      Cesium.Transforms.headingPitchRollToFixedFrame(
        position,
        hpRoll,
        Cesium.Ellipsoid.WGS84,
        fixedFrameTransform
      ),
      speedVector,
      position
    );
    // pathPosition.addSample(Cesium.JulianDate.now(), position);
    Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform,
      Cesium.Transforms.headingPitchRollToFixedFrame(
        position,
        hpRoll,
        Cesium.Ellipsoid.WGS84,
        fixedFrameTransform
      )
    );
    var translationOfPlane = Cesium.Matrix4.fromTranslation(
      position,
      new Cesium.Matrix4()
    );
    var particlesOffset = new Cesium.Cartesian3(
        -8.950115473940969,
        34.852766731753945,
        -30.235411095432937
      ),
      translationOffset = Cesium.Matrix4.fromTranslation(
        particlesOffset,
        new Cesium.Matrix4()
      ),
      particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new Cesium.Matrix4()
      ),
      particlesModelMatrix1= Cesium.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new Cesium.Matrix4()
      );
    // itemOptics.modelMatrix=particlesModelMatrix;
    for (var i = 0; i < 12; i++) {
      RadarSystems[i].modelMatrix = particlesModelMatrix;
      OpticSystems[i].modelMatrix = particlesModelMatrix1;
    }
  });
  //镜头顺时针旋转九十度，即东向
  var heading = Cesium.Math.toRadians(90);
  //镜头倾斜30度俯视
  var pitch = Cesium.Math.toRadians(-30);
  this.Global.viewer.zoomTo(
    this.Global.viewer.entities,
    new Cesium.HeadingPitchRange(heading, pitch)
  );
}
/**方法2**/

}
};
</script>

<style lang='scss' scoped>

cesiumContainer {

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容