Altering an entity's 'material' property dynamically?

In my project I've created a polygon entity whose position update dynamically through a Cesium.CallbackProperty:

polyline = viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(function () {
return positions;
}, false),
material: Cesium.Color.fromRandom({ alpha: 1.0 });

The position callbackProperty works fine. It updates every time the 'positons' variable is changed. Now I'm trying to do the same thing with the material property but when I do Cesium throws an error

Basically I'm trying to connect a "colorPicker" control to a polygon entity so that when I change a color the polygon's material updates automatically.

Any helped would be greatly appreciated, thanks.

The material property for a color is actually an instance of ColorMaterialProperty. See #1 from this link for a full example:

Did you ever figure out how to get the functionality you described working? I'm trying to do something really similar (I think) where I control at what moment the entity color changes and what color it changes to. I'm having a hard time modifying the full example that Matthew Amato gave in his response to you to fit my purpose. I cannot figure out how to control the CallbackProperty function so that it is not called infinitely. If you were able to wrap your head around this functionality, I would appreciate some help. Thank you.


The CallbackProperty is designed to be called every frame. If you want to control when the color changes, you can just set the material property to a new value. Here’s an example where I change the color every two seconds:

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

var entity = viewer.entities.add({
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : Cesium.Color.fromRandom({alpha: 1.0})

entity.polygon.material = Cesium.Color.fromRandom({alpha: 1.0});
}, 2000);




Hi Guys,

Please refer below code where there's a polygon in which i had used callback property.
But while runtime, its throwing an error :

"function () { getCartesians;} could not be cloned." .
Please suggest what should be done to get this function cloned?? and what is the process??

Code :
var Polygon = viewer.entities.add({
name : 'Red box with black outline',
polygon : {
  hierarchy : {
      positions :
new Cesium.CallbackProperty(function () { getCartesians;}, false)},

material : Cesium.Color.ORANGE.withAlpha(0.5),
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,

Thanks in advance.Please help

You should be calling the function itself, I beleive:

var Polygon = viewer.entities.add({
name : ‘Red box with black outline’,
polygon : {
hierarchy : {
positions :
new Cesium.CallbackProperty(function () { getCartesians();}, false)},

material : Cesium.Color.ORANGE.withAlpha(0.5),
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,


But I think we need more context to figure out what;s going on. Can you create a Sandcastle example showing the problem?



Hi Gabby,

Here, Basic Aim is :
A Polygon should move simultanesously with the Aircraft but at ground level. So i am using callback property coz i may get continuous position of aircraft and i will pass that same positions to polygon.

thereforth, using getCartesians() method in callbackproperty API which I had defined the

getCartesians() method.

method will give me cartesian position of aircraft
continuously and i may pass it to draw the polygon

But, it is thowing the cloning error as below:

How may i get this resolved??

Thanks… ;>


Shubham M