SuperMap iClient3D for Cesium实现飞机尾焰与飘带

kele

前言
三维系统中，飞机沿线飞行功能十分常见，然而单单只添加飞机的话，总感觉缺少点什么。仔细观察不难发现，添加的飞机、导弹等高速运动的模型，没有尾焰喷射的效果，让整个模型缺乏真实感。今天我们一起来看下如何实现飞机尾焰效果吧。

一、实现思路

提到尾焰，我首先想到粒子系统，粒子系统能做出逼真的效果动画，如喷泉、火焰等。考虑到粒子效果的性能消耗以及不好实时跟随飞机尾部等问题，该方案被舍弃。
entity对象中有一个path路径对象，它能画出物体的运动轨迹，感觉这个方法可行

二、实现过程

1、实现路径跟随

var planeModel = viewer.entities.add({
  availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({// 和时间轴关联
    start: start,
    stop: end
  })]),
  position: property,
  orientation: new Cesium.VelocityOrientationProperty(property),// 根据所提供的速度计算模型的朝向
  model: {// 模型数据
    uri: './SampleData/gltf/客机模型/plane4.gltf',
    scale: 1
  },
  path: {
    show: true,
    leadTime: -1,
    trailTime: 20,
    width: 5,
    resolution: 0.1,
  },
});

2、设置材质。可以看到，虽然实现了路径跟随，但是显得特别僵硬，完全达不到尾焰效果。
既然path路径是一个线型符号，那么它一定也支持线型材质，如果我们给这个尾线设置不同材质，是否能实现不同效果呢？
我们来看这款材质，它可以设置线尾部的宽窄，这符合我们的需求

material: new Cesium.PolylineGlowMaterialProperty({
  glowPower: 0.5,
  taperPower: 0.2,
  color: Cesium.Color.RED,
}),

除此之外，我们还可以使用自定义材质，实现透明渐变的飘带效果。这里的实现思路是给材质赋予图片纹理

function PolylineTrailLinkMaterialProperty(color, duration) {
  this._definitionChanged = new Cesium.Event();
  this._color = undefined;
  this._colorSubscription = undefined;
  this.color = color;
  this.duration = duration;
  this._time = (new Date()).getTime();
}

Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    }
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    }
  },
  color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
  return 'PolylineTrailLink';
};
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
  if (!Cesium.defined(result)) {
    result = {};
  }
  result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
  result.image = Cesium.Material.PolylineTrailLinkImage;
  result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
  return result;
};
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
  return this === other ||
      (other instanceof PolylineTrailLinkMaterialProperty &&
          Property.equals(this._color, other._color))
};
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "./hf2.jpg";
Cesium.Material.PolylineTrailLinkSource = "\
    uniform vec4 color;\n\
    uniform float time;\n\
    uniform sampler2D image;\n\
    czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    {\n\
      czm_material material = czm_getDefaultMaterial(materialInput);\n\
      vec2 st = materialInput.st;\n\
      vec4 colorImage = texture2D(image, vec2(st.s, st.t));\n\
      material.alpha = colorImage.a * color.a;\n\
      material.diffuse = colorImage.rgb;\n\
      return material;\n\
    }";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
  fabric: {
    type: Cesium.Material.PolylineTrailLinkType,
    uniforms: {
      color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
      image: Cesium.Material.PolylineTrailLinkImage,
      time: 0,
      repeat: 3
    },
    source: Cesium.Material.PolylineTrailLinkSource
  },
  translucent: function (material) {
    return true;
  }
});

material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.SKYBLUE,10000)