Cesium Fading area
HTML
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css">
<script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
<div id="cesiumContainer"></div>
CSS
html, #cesiumContainer {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
JavaScript
var viewer = new Cesium.Viewer('cesiumContainer');
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.equals = function () {
return false;
};
CustomMaterialProperty.prototype.getValue = function (time, result) {
var key;
for (key in this._material.uniforms) {
result[key] = this._material.uniforms[key];
}
result.source = '';
};
var angle;
var array;
for (angle = 0; angle < 360; angle += 30) {
array = [];
array.push(5 * Math.sin((angle - 10) / 180 * Math.PI));
array.push(50 + 5 * Math.cos((angle - 10) / 180 * Math.PI));
array.push(5 * Math.sin((angle + 10) / 180 * Math.PI));
array.push(50 + 5 * Math.cos((angle + 10) / 180 * Math.PI));
array.push(0);
array.push(50);
viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(array),
material: new CustomMaterialProperty({
type: 'Fade',
uniforms: {
fadeOutColor: new Cesium.Color(1.0, 0.0, 0.0, 0.8),
fadeInColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
maximumDistance: 0.4,
repeat: false,
fadeDirection: {
x: Math.sin(angle / 180 * Math.PI),
y: Math.cos(angle / 180 * Math.PI)
},
time: new Cesium.Cartesian2(0.5 - 0.5 * Math.sin(angle / 180 * Math.PI), 0.5 - 0.5 * Math.cos(angle / 180 * Math.PI))
}
...