group of polyline's orientation/rotation

CesiumJS
1

Hi,
I am trying to create a radial effect around the globe. I have it working but it goes vertically through the North Pole. How do I change this so it goes across the globe, a bit like the equator but centred.

Code so far

var r = 6371000 + 2289125;
var t = Math.PI / 180 * 2;

for (var i = 0; i < 180; i++) {
   var x = r * Math.cos(t * i);
   var z = r * Math.sin(t * i);

   var surfacePosition = new Cesium.Cartesian3( x * .985, 0, z * .985);

   entities.add({
                polyline : {
                    positions: [surfacePosition, heightPosition],
                    material : new Cesium.Color(1.0, 1.0, 1.0, 0.2),
                    followSurface:true,
                    width: 0.4
                }
            });
}

2

Hi there,

I didn’t have quite enough information to run your code. What is heightPosition?

Best,

  • Rachel
3

Thanks Rachel, sorry forgot to include that.

var heightPosition = new Cesium.Cartesian3(x, 0, z);

4

Hello,

I’m a little confused about what you are trying to do, but if you change these two lines it will draws around the equator:

var heightPosition = new Cesium.Cartesian3(x, z, 0);
var surfacePosition = new Cesium.Cartesian3( x * 0.985, z * 0.985, 0);

``

Best,

Hannah

5

Great. Worked perfect. Thanks Hannah.

In case you were wondering what it was for I was playing with drawing a radial ring around the globe to give it a tech feel :slight_smile:

   function addOrbitalRing(entities){
        var r = 6371000 + 2289125;
        var t = Math.PI / 180 * 2;

        for (var i = 0; i < 180; i++) {
            var x = r * Math.cos(t * i);
            var z = r * Math.sin(t * i);

            var heightPosition = new Cesium.Cartesian3(x, z, 0);
            var surfacePosition = new Cesium.Cartesian3( x * 0.985, z * 0.985, 0);

            entities.add({
                polyline : {
                    positions: [surfacePosition, heightPosition],
                    material : new Cesium.Color(1.0, 1.0, 1.0, 0.2),
                    followSurface:true,
                    width: 0.4
                }
            });

            if (i % 5 == 0) {

                var heightPosition = new Cesium.Cartesian3(x, z, 0);
                var surfacePosition = new Cesium.Cartesian3( x * 0.965, z * 0.965, 0);

                entities.add({
                    polyline : {
                        positions: [surfacePosition, heightPosition],
                        material : new Cesium.Color(1.0, 1.0, 1.0, 0.2),
                        followSurface:true,
                        width: 0.4
                    }
                });
            }

            if (i % 15 == 0) {
                var heightPosition = new Cesium.Cartesian3(x, z, 0);
                var surfacePosition = new Cesium.Cartesian3( x, z, 200000);

                entities.add({
                    polyline : {
                        positions: [surfacePosition, heightPosition],
                        material : new Cesium.Color(1.0, 1.0, 1.0, 0.4),
                        followSurface:true,
                        width: 0.4
                    }
                });
            }
        }
    }