Altering an entity's 'material' property dynamically?

CesiumJS
1

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.

2

The material property for a color is actually an instance of ColorMaterialProperty. See #1 from this link for a full example: https://groups.google.com/d/msg/cesium-dev/L05gq_SZ4uI/C2OHzKwmjW4J

3

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.

4

Hello,

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})
}
});

setInterval(function(){
entity.polygon.material = Cesium.Color.fromRandom({alpha: 1.0});
}, 2000);
viewer.zoomTo(viewer.entities);

``

Best,

Hannah

5

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

6

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?

Thanks,

Gabby

7

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.

technically,
getCartesians()
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:

image.png
image.png1040×376 60.5 KB

How may i get this resolved??

Thanks… ;>

Regards,

Shubham M