# Problem with PolylineVolumeGraphics

**URL:** <https://community.cesium.com/t/problem-with-polylinevolumegraphics/6668>\
**Category:** CesiumJS\
**Created:** [March 14, 2018, 1:33pm UTC](https://community.cesium.com/t/problem-with-polylinevolumegraphics/6668 "2018-03-14T13:33:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Scott\_Reynolds](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_reynolds/32/2014_2.png) [@Scott\_Reynolds](https://community.cesium.com/u/Scott_Reynolds)\
**Post date:** [March 14, 2018, 1:33pm UTC](https://community.cesium.com/t/problem-with-polylinevolumegraphics/6668/1 "2018-03-14T13:33:07Z")

</div>

**1. A concise explanation of the problem you’re experiencing.**

The shape I’m providing “surrounds” the z-axis, but the extrusion is always being drawn “above” the reference positions.

**2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.**

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

//Use STK World Terrain

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({

```
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',

requestVertexNormals: true

```

});

//Set the random number seed for consistent results.

Cesium.Math.setRandomNumberSeed(3);

var start = Cesium.JulianDate.fromDate(new Date());

var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

function computeFlightPath(lon, lat, radius, outPos) {

```
var sampledPos = new Cesium.SampledPositionProperty();

var count = 0;

for (var i = 0; i <= 270; i += 15) {

    var radians = Cesium.Math.toRadians(i);

    

    var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());

    

    var position = Cesium.Cartesian3.fromDegrees(

        lon + (radius * 1.5 * Math.cos(radians)),

        lat + (radius * Math.sin(radians)),

        Cesium.Math.nextRandomNumber() * 500 + 1750);

        

    sampledPos.addSample(time, position);

    outPos[count++] = position;

}

return sampledPos;

```

}

function computeFinalFlightPath(a, b, outPos) {

```
var sampledPos = new Cesium.SampledPositionProperty();

for (var i = 0; i < a.length; i++) {

    var radians = Cesium.Math.toRadians(i * 15);

    

    var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());

    

    var position = Cesium.Cartesian3.fromElements(

        ((a[i].x + b[i].x) * 0.5),

        ((a[i].y + b[i].y) * 0.5),

        ((a[i].z + b[i].z) * 0.5));

    sampledPos.addSample(time, position);

    outPos[i] = position;

}

return sampledPos;

```

}

function createFlightGraphics(sampledPos, pos, color) {

```
for (var p = 0; p < pos.length; p++) {

    viewer.entities.add({

        position: pos[p],

        point: {

            pixelSize : 8,

            color: Cesium.Color.TRANSPARENT,

            outlineColor: color,

            outlineWidth: 3

        }

    });

}

viewer.entities.add({

    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

        start: start,

        stop: stop

    })]),

    // Use our computed positions

    position: sampledPos,

    // Automatically compute orientation based on position movement.

    orientation : new Cesium.VelocityOrientationProperty(sampledPos),

    path: {

        resolution: 1,

        material: new Cesium.PolylineGlowMaterialProperty({

            glowPower : 0.1,

            color : color

        }),

        width : 10

    }

});

```

}

//Compute the position

var uav1Pos = ;

var uav1SampledPos = computeFlightPath(-83.60986232757568,41.653258658953995, 0.03, uav1Pos);

var uav2Pos = ;

var uav2SampledPos = computeFlightPath(-83.60986232757570,41.653258658953998, 0.033, uav2Pos);

var uav3Pos = ;

var uav3SampledPos = computeFinalFlightPath(uav1Pos, uav2Pos, uav3Pos);

// Create graphics

//createFlightGraphics(uav1SampledPos, uav1Pos, Cesium.Color.YELLOW);

//createFlightGraphics(uav2SampledPos, uav2Pos, Cesium.Color.RED);

createFlightGraphics(uav3SampledPos, uav3Pos, Cesium.Color.CYAN);

viewer.entities.add({

```
polylineVolume: {

    positions: uav3Pos,

    shape: [

        new Cesium.Cartesian2(-500.0, -200.0),

        new Cesium.Cartesian2( 500.0, -200.0),

        new Cesium.Cartesian2( 500.0, 200.0),

        new Cesium.Cartesian2(-500.0, 200.0)

    ],

    material: Cesium.Color.BLUE.withAlpha(0.5),

    outline: true,

    outlineColor: Cesium.Color.BLACK

}

```

});

viewer.zoomTo(viewer.entities);

``

**3. Context. Why do you need to do this? We might know a better way to accomplish your goal.**

Investigating a solution to another question on cesium-dev.

**4. The Cesium version you’re using, your operating system and browser.**

I’m at the head of main using Chrome 64.0.3282.186 on Windows 10.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [March 19, 2018, 9:27pm UTC](https://community.cesium.com/t/problem-with-polylinevolumegraphics/6668/2 "2018-03-19T21:27:57Z")

</div>

HI Scott,

It looks like the extruded shape is indeed always “above” those positions. This makes sense when you are drawing the volume with [positions on the surface](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Polyline%20Volume.html), but otherwise it doesn’t. I’ve opened a new issue [#6350](https://github.com/AnalyticalGraphicsInc/cesium/issues/6350) to track.

Thanks,

Gabby