How on earth do I draw a donut?

335 views
Skip to first unread message

dont.touch.t...@gmail.com

unread,
Oct 9, 2016, 2:24:59 AM10/9/16
to cesium-dev
Hi all,

Sorry for the very newbie question, but for the life of me cant figure out how to draw a Donut. I assume I draw a polygon containing a large circle and a smaller one as a hole, but cant get any further :(

Here is as far as I got:

var donut = viewer.entities.add({
name : 'A donut',
polygon : {
hierarchy : {
positions : new Cesium.CircleOutlineGeometry({
center : Cesium.Cartesian3.fromDegrees(0, 0),
radius : 100000.0
}),
holes : [ new Cesium.CircleOutlineGeometry({
center : Cesium.Cartesian3.fromDegrees(0, 0),
radius : 10000.0
})]
},
material : Cesium.Color.BLUE.withAlpha(0.5),

}
});

viewer.zoomTo(viewer.entities);


Could someone please point me in the right direction?

Thanks,

Hannah Pinkos

unread,
Oct 10, 2016, 10:13:58 AM10/10/16
to cesium-dev, dont.touch.t...@gmail.com
Hello,

We actually don't have a donut type built in.  You will have to pass an array of the outer and inner positions of the circle to the polygon type.
You can use EllipseGeometryLibrary.computeEllipsePositions to get the positions though.  Here is an example:

var viewer = new Cesium.Viewer('cesiumContainer');

var ellipse = Cesium.EllipseGeometryLibrary.computeEllipsePositions({
    semiMinorAxis
: 500000,
    semiMajorAxis
: 500000,
    rotation
: 0,
    center
: Cesium.Cartesian3.fromDegrees(-100, 34),
    granularity
: Cesium.Math.RADIANS_PER_DEGREE
}, false, true);
var outerPositions = Cesium.Cartesian3.unpackArray(ellipse.outerPositions);

var ellipse2 = Cesium.EllipseGeometryLibrary.computeEllipsePositions({
    semiMinorAxis
: 300000,
    semiMajorAxis
: 300000,
    rotation
: 0,
    center
: Cesium.Cartesian3.fromDegrees(-100, 34),
    granularity
: Cesium.Math.RADIANS_PER_DEGREE
}, false, true);
var innerPositions = Cesium.Cartesian3.unpackArray(ellipse2.outerPositions);

var bluePolygon = viewer.entities.add({
    polygon
: {
        hierarchy
: {
            positions
: outerPositions,
            holes
: [{
                positions
: innerPositions
           
}]
       
},
        material
: Cesium.Color.BLUE.withAlpha(0.5)
   
}
});

viewer
.zoomTo(viewer.entities);



Best,

Hannah

dont.touch.t...@gmail.com

unread,
Oct 11, 2016, 1:34:05 AM10/11/16
to cesium-dev
Perfect! Thank you!
Reply all
Reply to author
Forward
0 new messages