How do I make the polygons appear on the floor of the models?

CesiumJS
1

Hi,

The polygons that I draw are covered by 3d objects as shown in the picture. How do I make the polygons appear on the floor of the models.

if this problem was with css I would use "z-index". Is there any solution in Cesium like z-index?

attached picture :

2

In that screenshot are you using ground primitives? Regular polygon primitives should not shade the 3d objects that are above them.

3

so is there any solution for this case?
this means; Do I not use the polygons and the tiles at the same time?

polygons created by:

                    var polygon = {
                            name: 'test',
                            polygon: {
                                hierarchy: Cesium.Cartesian3.fromDegreesArray(coords),
                                material: Cesium.Color.fromCssColorString('#fff000').withAlpha(0.09),
                          
                            }
                        };

                         viewer.entities.add(polygon);

tilesets created by:
  tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                    url: '/sss',
                    maximumScreenSpaceError: 2,
                    maximumNumberOfLoadedTiles: 1000
                }));

4

Thanks for the sample code, I think this is a bug on our end. I opened an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/6195.

5

I have changed classification type as terrain. But still doesnt work well.

viewer.scene.primitives.add(new Cesium.GroundPrimitive({
  classificationType: Cesium.ClassificationType.TERRAIN
}));

6

This code works for me for covering just the terrain:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Cesium.CesiumIon.create3DTileset(1458, { accessToken: ‘eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmJiNTAxOC1lOTg5LTQzN2EtODg1OC0zMWJjM2IxNGNlYmMiLCJpZCI6NDQsImFzc2V0cyI6WzE0NThdLCJpYXQiOjE0OTkyNjM4MjB9.1WKijRa-ILkmG6utrhDWX6rDgasjD7dZv-G5ZyCmkKg’ })

.then(function(tileset) {

    viewer.scene.primitives.add(tileset);

    viewer.zoomTo(tileset);

});

var cartographics = [new Cesium.Cartographic(-1.3194369277314022, 0.6988062530900625),

                 new Cesium.Cartographic(-1.3193955980204217, 0.6988091578771254),

                 new Cesium.Cartographic(-1.3193931220959367, 0.698743632490865),

                 new Cesium.Cartographic(-1.3194358224045408, 0.6987471965556998)];

var rectangle = Cesium.Rectangle.fromCartographicArray(cartographics);

var rectanglePrimitive = viewer.scene.primitives.add(new Cesium.GroundPrimitive({

geometryInstances : new Cesium.GeometryInstance({

    geometry : new Cesium.RectangleGeometry({

        rectangle : rectangle

    }),

    attributes: {

        color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))

    }

}),

classificationType : Cesium.ClassificationType.TERRAIN

}));

``

7

Thank you for answer.

So can/how i use it with lat/long?

8

A Cartographic is a data type that encapsulates lat, long, and optionally height.

9

Thank you for your help.

viewer.scene.primitives.add(new Cesium.GroundPrimitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray(-1.3194369277314022, 0.6988062530900625, -1.3193955980204217, 0.6988091578771254, -1.3193931220959367, 0.698743632490865, -1.3194358224045408, 0.6987471965556998)
            )
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
        }
    }),
    classificationType: Cesium.ClassificationType.TERRAIN
}));

10

Hello,

Thanks for reporting this issue! This has been fixed and will be included in the Cesium 1.43 release available tomorrow.

Best,

Hannah