Can I use any fabric material with the Entity API?

CesiumJS
1

I currently trying to create a Polygon using the Fade material from https://cesiumjs.org/Cesium/Build/Documentation/Material.html

However PolygonGraphics (https://cesiumjs.org/Cesium/Build/Documentation/PolygonGraphics.html) defines material as MaterialProperty which can only be one of the following...

  ColorMaterialProperty
  CompositeMaterialProperty
  GridMaterialProperty
  ImageMaterialProperty
  PolylineGlowMaterialProperty
  PolylineOutlineMaterialProperty
  StripeMaterialProperty

Is there anyway to pass a fabric notation material into a entity construct or do I have to create a class similar to ColorMaterialProperty and implement getType() etc. myself?

2

I’ve managed to get this working… by creating a custom MaterialProperty which allows fabric notation to be passed in… I can’t help but feeling I’m missing something… Surely this must be provided ‘out of the box’…?

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var area = Cesium.Cartesian3.fromDegreesArray([-4, 50, 4, 52, 4, 48]);

var CustomMaterialProperty = function (material) {

this._definitionChanged = new Cesium.Event();

this._material = material;

};

Cesium.defineProperties(CustomMaterialProperty.prototype, {

isConstant: {

get: function () {

return true;

}

},

definitionChanged: {

get: function () {

return this._definitionChanged;

}

}

});

CustomMaterialProperty.prototype.getType = function (time) {

return this._material.type;

};

CustomMaterialProperty.prototype.getValue = function (time, result) {

var key;

for (key in this._material.uniforms) {

result[key] = this._material.uniforms[key];

}

};

var entity = viewer.entities.add({

polygon: {

hierarchy: area,

material: new CustomMaterialProperty({

type: ‘Fade’,

uniforms: {

fadeInColor: new Cesium.Color(1.0, 0.0, 0.0, 0.5),

fadeOutColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),

maximumDistance: 1,

repeat: false,

fadeDirection: {

x: true,

y: false

},

time: new Cesium.Cartesian2(0, 0)

}

}),

outline: true,

outlineWidth: 10

},

});

``