Is it possible to draw a trapezoid?

CesiumJS
1

Hello,

I was checking this demo and was wondering if it’s possible to draw a trapezoid or pyramid using cesium graphics.

Polygon - Cesium Sandcastle

I tried to play around, using the hierarchy, but it looks like I never manage to get something where the top point are not above the bottom ones.

is it possible ?

2

Hi!

I modified the Sandcastle a bit to get a trapezoid. I commented the value that I modified:

Sandcastle.

3

Thanks for the reply.
I see how this works, but this is a flat 2d trapezoid. How would I add some elevation ? height, do not seem to do anything

4

Please reference our Geometry and Appearance Sandcastle. Here there are some custom shapes such as the white and blue 3D shapes on the left. You can use a similar technique to draw a pyramid knowing the corners of the pyramid.

5

Thank for the reply,

As the sandcastle show, and from what I can understand, when we draw polygon, we can only provide the base points and and extrudedHeight.

But it is currently not possible to add point with different altitude, therefor, not possible to draw a pyramid or a trapezoid since the amount of point at the base, are not the at the same position of the point at the top.

so to answer my question, no it is not possible to draw a pyramid and trapezoid because we can only draw polygon that are “symmetrical” from base to top.

I guess that would be a new feature

6

I also just noticed a perPositionHeight property, but doing this

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy([
        Cesium.Cartesian3.fromDegrees(-118.0, 30.0, 40),
        Cesium.Cartesian3.fromDegrees(-112.0, 32.0, 60),
        Cesium.Cartesian3.fromDegrees(-108.0, 30.0, 40),
        Cesium.Cartesian3.fromDegrees(-112.0, 32.0, 60),
        Cesium.Cartesian3.fromDegrees(-108.0, 35.0, 40),
        Cesium.Cartesian3.fromDegrees(-112.0, 32.0, 60),
        Cesium.Cartesian3.fromDegrees(-118.0, 35.0, 40),
        Cesium.Cartesian3.fromDegrees(-112.0, 32.0, 60)
      ]
    ),
    perPositionHeight: true,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

do not have any altitude.

I also saw that we can draw using geometry instead

var positions = Cesium.Cartesian3.fromDegreesArrayHeights([
    -108.0, 25.0, 100000,
    -100.0, 25.0, 100000,
    -100.0, 30.0, 100000,
    -108.0, 30.0, 300000
]);

var orangePolygonInstance = new Cesium.GeometryInstance({
    geometry : Cesium.PolygonGeometry.fromPositions({
        positions : positions,
        extrudedHeight: 500,
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        perPositionHeight : true
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : orangePolygonInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        closed : true,
        translucent : false
    })
}));

but this also require base to be same as top (it works for trapezoid, but not for pyramid).

so I guess it’s a new feature ?