Search code examples
javascriptcesiumjs

Place a PolygonGeometry in the air in Cesium


I'm trying to position a PolygonGeometry in the air in Cesium. In short, I'd like to use height to create an offset from the ground, and extrudedHeight to give the object a certain thickness. However when I set extrudedHeight, the height setting itself is ignored and the extrusion goes down all the way to the ground. So I can layer planes on top of each other, but no three-dimensional objects. What's the correct way to achieve this?

Here's what I'm doing so far:

        polygonGeometry = Cesium.PolygonGeometry.fromPositions(
            positions: pos, 
            vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT                
            extrudedHeight: @options.extrudedHeight,
            height:@options.height
        )

        geometryInstance = new Cesium.GeometryInstance
            geometry: polygonGeometry

        primitive = new Cesium.Primitive
            geometryInstances: [geoInstance]

Solution

  • It's hard to say exactly what the problem is, since your example is incomplete and also seems to be using a form of data binding that I'm not familiar with. But here's a complete example that can be copied/pasted into Sandcastle so that you can compare.

    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    
    var positions = Cesium.Cartesian3.fromDegreesArray([
        -88.0, 35.0,
        -80.0, 35.0,
        -80.0, 40.0,
        -88.0, 40.0
    ]);
    
    var geometryInstance = new Cesium.GeometryInstance({
        geometry : Cesium.PolygonGeometry.fromPositions({
            positions : positions,
            height: 1000000,
            extrudedHeight: 1500000,
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
        }
    });
    
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : geometryInstance,
        appearance : new Cesium.PerInstanceColorAppearance({
            closed : true,
            translucent : false
        })
    }));