Replacing the background sky image in cesium app.

1,267 views
Skip to first unread message

Saugat Awale

unread,
Jul 10, 2017, 10:37:25 AM7/10/17
to cesium-dev
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

unread,
Jul 10, 2017, 7:53:45 PM7/10/17
to cesium-dev
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

unread,
Jul 11, 2017, 9:38:29 AM7/11/17
to cesium-dev
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

unread,
Jul 11, 2017, 9:44:36 AM7/11/17
to cesium-dev

Saugat Awale

unread,
Jul 11, 2017, 10:23:08 AM7/11/17
to cesium-dev
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

unread,
Jul 11, 2017, 10:32:28 AM7/11/17
to cesium-dev

Saugat Awale

unread,
Jul 14, 2017, 3:55:34 AM7/14/17
to cesium-dev
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

unread,
Jul 14, 2017, 12:23:16 PM7/14/17
to cesium-dev
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

unread,
Jul 17, 2017, 5:15:28 AM7/17/17
to cesium-dev
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

unread,
Jul 17, 2017, 11:10:29 AM7/17/17
to cesium-dev
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

unread,
Jul 28, 2017, 8:42:04 AM7/28/17
to cesium-dev
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

unread,
Jul 28, 2017, 12:11:54 PM7/28/17
to cesium-dev

Saugat Awale

unread,
Aug 22, 2017, 3:58:38 AM8/22/17
to cesium-dev
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

unread,
Aug 23, 2017, 3:23:58 PM8/23/17
to cesium-dev
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

unread,
Aug 24, 2017, 3:45:47 AM8/24/17
to cesium-dev
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

unread,
Aug 24, 2017, 3:12:36 PM8/24/17
to cesium-dev
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

unread,
Dec 4, 2018, 6:50:00 AM12/4/18
to cesium-dev
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

unread,
Dec 4, 2018, 1:24:02 PM12/4/18
to cesium-dev
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?
Reply all
Reply to author
Forward
0 new messages