Cesium Entity Plane

Hi , I am new to Cesium and having a bit of issue. Imagine having an entity in CesiumJS which has position and orientation. How can we get or create a plane for this entity ? The idea is that plane should be oriented and positioned based on entity. In entity documentation there is plane property which is supposed to create this plane but I can’t figure out how to do it without having information about normal vector. Basically I want a plane like screenshot below for the box where I have put image as material on top of it.

@Shafi_Bajauri

Welcome to the community :confetti_ball: and thank you for the detailed post.

To better answer your question, a little bit more context might be helpful. Can you provide some details on what kind of entity you are referring to?

Generally speaking, the Plane property seems like the correct member to use for this application. For your reference, here is the Plane documentation:

https://cesium.com/learn/cesiumjs/ref-doc/Plane.html?classFilter=plane

The normal vector to a surface is a vector that is perpendicular to the surface at a given point. See n:

Here is further information about the normal:

https://mathworld.wolfram.com/NormalVector.html

In this case, you can use the normal to dictate how the Plane is oriented. If you set the normal correctly, you should get the result shown in your screenshot. Let me know if you have any other questions or concerns.

-Sam

Hi and thanks for the reply. I have a box with dimensions (1.0, 1.0, 0.0) which basically looks like a 2D polygon. As material of this box I have used an image. As you can see, in screenshot above there are two boxes with images. And of course these boxes have position and orientation as well.

So now having position and orientation information is it possible to create a plane for an entity or still the normal vector of plane should be defined as property for entity ?
My entity has not a complex shape like a ball or something . For his kind of box entity the normal of plane would be the same at any point of the box. I mean we already have position and orientation angels for entity, isn’t it sufficient for creating the plane (like red plane above) ?

In the link below, as it says ( and this exactly what I want):

new Cesium.PlaneGraphics(options)
Describes a plane. The center position and orientation are determined by the containing Entity.

ttps://cesium.com/learn/cesiumjs/ref-doc/PlaneGraphics.html

So shortly, do we still need to define the normal vector of plane even if we have already defined the position and orientation of entity ?

and just to clarify why I need these planes and their normal. I have created another independent plane with normal vector of (1.0,0.0,0.0) and named it reference plane. What I want is to calculate the angle between normal of my reference plane and normal of box planes (the entity boxes above). And to calculate it I would need normal vectors of both planes. For reference plane it is (1,0,0) but for box plane if Ceisum can create the plane, I should be able to get this property of box in console and use it for angle calculations.
https://www.wikihow.com/Find-the-Angle-Between-Two-Vectors

@Shafi_Bajauri

Thank you for the details on the entity that you are referring to. What use case do you have for creating the normal plane? Can you share a sandcastle of your work? This would help me better understand your project.

I am glad the PlaneGraphics documentation has been helpful. To answer your question - yes, you still need to define the normal vector of a plane. This is true even if you have already defined the position and orientation of your entity.

In terms of calculating the angle between the normal of your reference plane and the normal of the other plane, the link that you provided seems to be the right resource. For simple examples, you could even calculate this by hand.

-Sam

Hi,
Thanks for the detailed answer.
Here is the sandcastle code of my work :

Two issue I am facing :

I know normal of my box from another program ( Agisoft Metashape) but when I put it in line 23 as normal of box plane. It doesn’t work and gives me error. But for a moment let’s assume I don’t have this normal vector. Is there any way to get this normal for my Box from Cesium ? PlaneGraphics seems to be the solution, but I can’t figure out how to do it. I couldn’t find a sample code of PlaneGraphics usage.

Secondly , in last part of the sandcastle I wrote a function which calculates angle between planes. When I want to calculate the angle between normal of my reference plane (1,0,0) and the normal of box plane ( lines 76-77-78 in sandcastle). the angle is totally wrong and gives me a 99.88 degree angle as result in console which visually in Cesium I can see it is wrong. Do you know why is this happenig.

Description why I need these angles : the boxes are supposed to show the camera location and orientation during image capture of a wall. The reference plane would be the place where I project these images. Let’s say I have 10 images and I projected them on reference plane. to decide which image is the best for further process, I would like to know the normal angle between reference plane and boxes which acts as images here. The least angle image would be the best one.

And a suggestion if the features above like comparison between planes such as angle calculation between planes, distance calculation between planes , getting their normal are not already available in Cesium, it would be really nice that you add them in future updates since they are simple but useful features.

@Shafi_Bajauri

I apologize for the late response - this has been a busy week with the release of CesiumJS 1.84. Thank you for sharing the sandcastle demo.

To address your first question. It seems like there were a few issues with the way that you updated plane. You need to ensure that you are using the correct parameters for new Cesium.Plane(). In addition, you need to ensure that the normal parameter is indeed normalized. This can be accomplished using Cesium.Cartesian3.normalize(cartesian, result) in

https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html

Both of these issues are addressed in the sandcastle below.

To address your second question. I recommend using the method Cesium.Cartesian3.angleBetween(left, right) in

https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html

I believe that this is an easier and more accurate solution than implementing it yourself. I also made this update to the sandcastle demo below. I marked all updates with the tag //NEW so that you will be able to easily spot them in the code.

Let me know if you have any other questions or concerns! Hopefully, you will find my sandcastle demo useful. Also, let me know if there is anything that I missed :grinning_face_with_smiling_eyes:

Best,
Sam

Hi Sam,

Sorry for late reply. Thanks for the answer and making it clear for me. I am just wondering the angle between these two planes using my method or Cesium.Cartesian3.angleBetween(left, right) is 1.743 radians or 99.88 degrees, but how ?
Visually the angle between them doesn’t look like 99 degrees. Are the normal vector pointing to the opposite directions totally ?

@Shafi_Bajauri

That’s a good point - it is always important to ensure that measurements are accurate and intuitive. I suspect that the normal vectors are indeed pointing in totally opposite directions.

-Sam