Creating plane/rectangle

CesiumJS
1

Hello, I am currently struggling with creating a place in 3D.
Using the function of “Cesium.Plane”, with the normal vector of the plane, I could successfully create the plane. However, I am now setting the values by myself in the code. Here I would like to create a function that creates a rectangle with four points selected in the cesium 3D space, with those points as its vertices. Do you have a function to create any shapes by clicking the points?

2

Welcome @Atsushi_Ishii ! Thanks for posting your question here.
You can use screenSpaceEventHandler to create event handlers for collecting clicked positions. And further use these positions to draw polygons as showing in this example.

I hope it helps you.

Regards,

2 Likes
3

Thank you. Is it possible to create polygons in 3D ? Is it possible to access to the points on OSM building?

4

Please create a separate Topic for OSM related queries. You can create 3D Polygons by using extrudedHeight property like:

polygon:{
      hierarchy: new Cesium.PolygonHierarchy(cartesian3Positions),
      material: Cesium.Color.BLUE.withAlpha(0.6),
      extrudedHeight: 100,
      height: 0,
      heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
    }
  • Regards,
5

Thank you so much where can I put this code ?

6

Apparently in the function of drawRectangle() …?

7

Yes, Sandcastle link.

8

image
image906×1022 173 KB

It outputs like this

9

image
image874×1038 89.6 KB

I meant to create the polygon on the wall like this. Can I implement it?

10

You can create Plane if you know the building wall location. Check this sandcastle link for Plane functionality. But why do you wanna do this?

11

I want to decorate the surface of the wall so I would like to put a polygon on the wall freely by selecting the points.

12

I have used this “Plane” function before, but it can be created by the given parameters…I would rather like to produce a polygon from points.

13

Anyway Thank you so much for your help…

14

Instead, can I get the properties of the point I select, such as latitude or longitude?

15

Yes you can by adding these codes in the sandcastle link:

 /* GET LON,LAT,ALT*/
  let cartographic = Cesium.Cartographic.fromCartesian(adaptivePosition);
  let lon = Cesium.Math.toDegrees(cartographic.longitude),
      lat = Cesium.Math.toDegrees(cartographic.latitude),
      height = cartographic.height;
  
  console.log(lon, lat, height);
  /* END */

Check browser’s console…

  • Regards,
2 Likes
16

Thank you so much. By the way, I have also tried to retrieve properties of the points such as lat/lon/height like the link below.

image
image1610×924 88.5 KB

Unfortunately, when I moved the mouse on the ground and tried to show the property, it was covered as it is shown in the picture. Do you know why it happened?
I copied the codes written in the link.

17

Sorry, I’m not able to generate this issue at my end. But it seems like you need to set disableDepthTestDistance property in label entity to keep it always in front of terrain, like:

label: {
        show: false,
        showBackground: true,
        font: "14px monospace",
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        pixelOffset: new Cesium.Cartesian2(15, 0),
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      }

Please let me know if it works or not.

  • Regards,
18

Thank you, it works now, but can I also make it appear height information as well?
It seems
var cartesian = viewer.camera.pickEllipsoid(…
does not give me height property.
However when I used
var cartesian = viewer.scene.pickPosition(movement.position);
It did not work.
Is there another option to get height information?
I am using Cesium.ScreenSpaceEventType.MOUSE_MOVE)

20

when I added the code above, it worked, thank you.

21 
handler.setInputAction(function (movement) {
      /*var cartesian = viewer.camera.pickEllipsoid(
        movement.endPosition,
        scene.globe.ellipsoid
      );*/
      var cartesian = viewer.scene.pickPosition(movement.endPosition);
      if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitudeString = Cesium.Math.toDegrees(
          cartographic.longitude
        ).toFixed(10);
        var latitudeString = Cesium.Math.toDegrees(
          cartographic.latitude
        ).toFixed(10);
        var height = cartographic.height;

        entity.position = cartesian;
        entity.label.show = true;
        entity.label.text =
          "Lon: " +
          ("   " + longitudeString).slice(-15) +
          "\u00B0" +
          "\nLat: " +
          ("   " + latitudeString).slice(-15) +
          "\u00B0"+
          "\nHeight: " +
          ("   " + height);
      } else {
        entity.label.show = false;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
1 Like