Callback property for alpha color material

CesiumJS
1

Hi,

I am creating a building using polygon entity. I want to make it
transparent by rangebar movement. How to pass the callback value to ‘alpha’ in
material section ?

html :-

jsfile :- function getTransValue()

        {

                    transperency =

document.getElementById(“trans_bld”).value;

                    return

parseFloat(transperency );

        }

buildings = cesiumViewer.entities.add({

polygon: {

hierarchy: Cesium.Cartesian3.fromDegreesArray(arr),

extrudedHeight: a,

height: b,

material: new Cesium.Color.fromCssColorString©.withAlpha(0.1),

outline: true,

outlineColor: Cesium.Color.BLACK,

outlineWidth: 2,

}

});

Here I am using color picker while adding the color.

2

Notice that material has a type of MaterialProperty, which is different from most others which just have a type of Property:

https://cesiumjs.org/Cesium/Build/Documentation/PolygonGraphics.html?classFilter=PolygonG

So you’ll need to wrap your callback property in one of these types:

https://cesiumjs.org/Cesium/Build/Documentation/MaterialProperty.html

So here’s one way to do that:

var colorProperty = new Cesium.ColorMaterialProperty();
``var color = new Cesium.Color(1, 0, 0, 1);

``colorProperty.color = new Cesium.CallbackProperty(function(time, result){
// You can change the alpha/red/green/blue components dynamically here.
// color.alpha = SomeValue;
return color;
}, false);

``

And when you’re creating your polygon entity the color material property is what you’d pass:

material: colorProperty

``

Let me know if that works for you.

2 Likes