Polygon with Orientation based on entity position

CesiumJS
1

Greetings,
I’m working with the CesiumJS tutorial “Build a Flight Tracker”. For our application instead of the full plane model we wanted to just draw a triangle. The triangle should point towards were it is flying like the model does. However, I cannot get the triangle to show up at all.
Much appreciated,
Jason Rogers

const vehicle_entity = viewer.entities.add({
name: vehicles[i].name,
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: vehicles[i].start, stop: vehicles[i].stop})]),
position: position_properties[i],
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-10.0,
-10.0,
0.0,
0.0,
-10.0,
10.0
])
),
material : Cesium.Color.BLUE,
},
orientation: new Cesium.VelocityOrientationProperty(position_properties[i]),
path: new Cesium.PathGraphics({width:2})
});

Previously I accidently posted this under my personal account, instead of my work account. Appologies.

2

@avmet.cesium

Welcome to the community :confetti_ball:

Interesting application - I am looking forward to seeing where you take this! I recommend looking at our CZML Path sandcastle demo:

https://sandcastle.cesium.com/?src=CZML%20Path.html

I think this demo might have all of the functionality that you are looking for! If you are looking for just more information about creating a cone or a triangle in the Cesium viewer, you should check out this demo:

and take a look at our CZML guide:

Let me know if you have any other questions or concerns!

Best,
Sam

3

Sam,
Thanks for the demos. I think the first one, making use of the image (billboard) could be exactly what we need. However, I’m unsure as to how I can tie the rotation of the image to the current heading.
Jason

4

@avmet.cesium

I am glad to hear that the demo I sent over is almost exactly what you are looking for. To tie the rotation of the billboard to the current heading, I recommend using the Billboard member rotation. Maybe you can update this member each frame to ensure that the Billboard is correctly oriented (based on the points in the CZML path)? Admittedly, I haven’t fleshed out all of the details of this implementation but I suspect that this is the optimal approach. You can find more information here:

This will involve a little bit of engineering on your end. Please keep me posted with updates! Looking forward to seeing what you come up with :smiley: Let me know if any other questions arise.

Best,
Sam

5

Sam,
Here is what we ended up doing. I drew a cone (cylinder) and then set the “orientation” property. I was able to calculate the heading for each time interval ahead of time and then set the orientation along with the path. Orientation does not seem to be available in CesiumJS directly so we switched to using CZML. This worked much better for our workflow anyway. Your examples were a big help even though we didn’t end up following your suggestion exactly.
Thanks,
Jason

6

@avmet.cesium

Happy to hear that the resources that I provided were helpful. I am also glad that you were able to find a robust solution :fireworks: Let me know if any other questions arise!

-Sam