Replacing the background sky image in cesium app.

[Saugat Awale]

Hello all, I wanted to know how to replace the background image of the night dark sky with our own image like it is done in this project http://www.agsattrack.com/.

Thanks in advance.

[Sean Lilley]

You can construct the viewer with a custom skybox pointing to file paths of your choice.

var viewer = new Cesium.Viewer('cesiumContainer', {

    skyBox : new Cesium.SkyBox({

        sources : {

          positiveX : 'skybox_px.jpg',

          negativeX : 'skybox_mx.jpg',

          positiveY : 'skybox_py.jpg',

          negativeY : 'skybox_my.jpg',

          positiveZ : 'skybox_pz.jpg',

          negativeZ : 'skybox_mz.jpg'

        }

    })

});

[Saugat Awale]

Thanks a lot for your help. I hope you could answer this one as well. How do I convert cartesian3d position to latitude, longitude and height? Thanks 

[Rachel Hwang]

Hi there, 

Look at this function: http://cesiumjs.org/Cesium/Build/Documentation/Cartesian3.html?classFilter=cart#.fromDegrees

Best, 

- Rachel

[Saugat Awale]

Hey Rachel, Thanks for your help. I needed a function that does the other way round. I want longitude, latitude and height by feeding it (x,y,z) co-ordinates.

[Rachel Hwang]

Ah, then this is what you need: http://cesiumjs.org/Cesium/Build/Documentation/Cartographic.html?classFilter=carto#.fromCartesian

Best,

- Rachel

[Saugat Awale]

Thanks a lot rachel. You seem quite proficient in cesium. Do you know how could I change the information displayed on the screen according to the time displayed in the cesium clock. For instance if someone increased the timer speed in cesium clock the representation on the cesium canvas should change accordingly. I have been able to use czml only for those models which exist in czml by default.

[Rachel Hwang]

Hi there,

If I understand you correctly, what you want is time dynamic data. Fortunately, the Cesium Entity APi is designed for this. Here's an example: 

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=c1b1ef84af7dd0b40b3102ffed164a3d 

Hope that helps,

- Rachel

[Saugat Awale]

Thanks a lot for your help rachel. Where did you find the example that you mentioned above. I could not find it in sample demos at cesium's sandcastle or did I miss it?

[Rachel Hwang]

Hi there,

I created this custom example using Sandcastle. See our tutorial on Sandcastle for more information: http://cesiumjs.org/tutorials/Sandcastle-Tutorial/

In the future, it's easiest to share code by saving your Sandcastle snippets a gist using the Share button.

Best,

- Rachel

[Saugat Awale]

Thanks a lot for your continuos support Rachel. I have now run into some other problem. I want to change the pause icon into a play button when it is clicked. I could not find the image source of the pause icon and I am assuming it is transformed from CSS. How do I implement such that when the pause button is clicked in the Cesium's clock its icon changes into a play button and vice versa? Thanks in advance.

[Rachel Hwang]

Hi,

Checkout Animation.css : https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Source/Widgets/Animation

Best,

- Rachel

[Saugat Awale]

het rachel how do I trigger the Today(Real time) button located just above the clock. I retrieved the element using javascript and fired the .click() function but does not seem to work. Is there any in-built function so that the cesium application will automatically locate towards current time when the user opens the app.

[Gabby Getz]

Hello,

Opening a Cesium application should automatically default to the current time, unless you've specified otherwise. If you want, you can create a new Clock (https://cesiumjs.org/Cesium/Build/Documentation/Clock.html) object and set the current time to now. Then pass the clock to the clockViewModel like this:

var viewer = new Cesium.Viewer('cesiumContainer', {

    clockViewModel : new Cesium.ClockViewModel(clock)

});

See the Clock Sandcastle Demo for a thorough example: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Clock.html&label=All

Thanks, I hope that helps!

Gabby

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Saugat Awale]

Yes it did help, Thanks alot. What I did was, instead of creating clock I just assigned the "Time now" directly to the current time property of whatever clock there was by default.

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.

[Gabby Getz]

Sounds good, I'm glad you were able to resolve your issue!

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.

[tosif...@gmail.com]

Hi,
I have used the same code above but the background is not changing. For image i have used multiple copies of the same image and gave it name as in the above code. Please advice on how to select an image or do i have to make some changes or there are some rules on selecting an image for Skybox.

[Omar Shehata]

Is this the code you used?

var viewer = new Cesium.Viewer('cesiumContainer', {

   skyBox : new Cesium.SkyBox({

       sources : {

         positiveX : 'skybox_px.jpg',

         negativeX : 'skybox_mx.jpg',

         positiveY : 'skybox_py.jpg',

         negativeY : 'skybox_my.jpg',

         positiveZ : 'skybox_pz.jpg',

         negativeZ : 'skybox_mz.jpg'

       }

   })

});

Have you checked the browser console to see if you're getting any errors? Where is the image coming from? Can you post your code here so I can take a look?