Solar system planets

Using Ed Mackey’s Sun model program as a base:
I’ve added all the planets of our Solar System. The sizes are to scale. If you increase the simulation speed you can watch them geo-synchronously revolve around the Earth at the same distance as Earth’s Moon.

Of course this is just a simple crude mock-up, and of course planets don’t revolve around the Earth! However being at the same distance as the Earth’s Moon does give a good sense of their size. The Sun is shown at 1 GigaMeter from the Earth (rather than it’s usual 150 GigaMeters) and is fixed in place. I was thinking of modifying it further making all of the planets orbit the Sun and in the proper order, but making the orbit distance much lower than in actuality so one can easily see all of the planets from one viewpoint. Also convert to entities, the label property on primitives didn’t seem to do anything.

If Simon1994PlanetaryPositions had all of the planets I suppose one could make the entire Solar System to scale in every way.

copy/paste to SandCastle

var viewer = new Cesium.Viewer(‘cesiumContainer’); = 1e12; //Move the far wall of the viewing frustum.

var scene = viewer.scene; = true; = false;

scene.globe.enableLighting = true;

var moonDistance = 384e6;var i;var center;

var sunN=0;var merN=1;var venN=2;var earN=3;var marN=4;

var jupN=5;var satN=6;var uraN=7;var nepN=8;

var radius = [

6.955e8 /Sun/

,2440000 /Mercury/

,6052000 /Venus/

,6371000 /Earth/

,3390000 /Mars/

,69911000 /Jupiter/

,58232000 /Saturn/

,25362000 /Uranus/

,24622000 /Neptune/


var color = [

Cesium.Color.fromCssColorString(’#FFFF00’) /Sun/

,Cesium.Color.fromCssColorString(’#444444’) /Mercury/

,Cesium.Color.fromCssColorString(’#EEEEEE’) /Venus/

,Cesium.Color.fromCssColorString(’#0000FF’) /Earth/

,Cesium.Color.fromCssColorString(’#FF8800’) /Mars/

,Cesium.Color.fromCssColorString(’#CC3333’) /Jupiter/

,Cesium.Color.fromCssColorString(’#D1B546’) /Saturn/

,Cesium.Color.fromCssColorString(’#6DB7A6’) /Uranus/

,Cesium.Color.fromCssColorString(’#71BEE5’) /Neptune/


var angle = [

0 /Sun/

,0 /Mercury/

,15 /Venus/

,0 /Earth/

,30 /Mars/

,45 /Jupiter/

,60 /Saturn/

,75 /Uranus/

,90 /Neptune/


var mat=;var pri=;






if(i == sunN){center=Cesium.Cartesian3();}else

{center=new Cesium.Cartesian3(moonDistanceMath.cos(angle[i]),moonDistanceMath.sin(angle[i]),0);}

pri[i]=scene.primitives.add(new Cesium.EllipsoidPrimitive(



,radii:new Cesium.Cartesian3(radius[i], radius[i], radius[i])






//The rest is unmodified from Ed Mackey’s Sun program (except the {x:1000000000,y:0,z:0} )

// Allocate “new” variables outside of the render loop when possible, to reduce garbage collection.

var sunPosition = new Cesium.Cartesian3();

var icrfToFixedScratch = new Cesium.Matrix3();

var sunModelMatrixScratch = new Cesium.Matrix4();

// Update the camera and the Sun with each animation frame.

function icrf(scene, time) {

if (scene.mode !== Cesium.SceneMode.SCENE3D) {



var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time, icrfToFixedScratch);

if (Cesium.defined(icrfToFixed)) {

// Update the camera with the new ICRF rotation = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);

// Compute Sun position in Inertial.

Cesium.Simon1994PlanetaryPositions.computeSunPositionInEarthInertialFrame(time, sunPosition);

// Transform Sun position from Inertial to Fixed.

Cesium.Matrix3.multiplyByVector(icrfToFixed, {x:1000000000,y:0,z:0}, sunPosition);

// Update the Sun’s modelMatrix to move it from the origin to its new position for this animation frame.

pri[sunN].modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.IDENTITY, sunPosition, sunModelMatrixScratch);





This program broke on one of the recent Cesium versions, to get it working like it did before by keeping the camera in the same ICRF position.

Change = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);


var offset = Cesium.Cartesian3.clone(;,offset);


to fix it

Having this line;


//no line at all

has the same VISUAL effect!

If you do console.log(camera.position) however you’ll notice that the first line changes camera.position and of course the empty line doesn’t. That’s because without offset .lookAtTransform just keeps your position in relation to the Earth Fixed frame and calculates how to show that position in the new ICRF frame.

Sandcastle example working with Cesium 1.76: link

But how to texture planetes?!?

Checkout this Sandcastle.

you just sent me to MY sandcastle, where I am TRYING to add texture to the second globe… :-]

Ok, I successfully textured the planets… but currently we have only multiple Mars planets… :-]

Main issue is that we need texture images accessible without CORS restrictions; they must be equirectangular projections of planets surfaces.

Another issue is that the north poles of planets point by default at zenith w.r.t. Earth suface, so you must rotate them by 90° to get the poles perpendicular to orbit (actually you’ll have to also tune poles orientation according to real data for each planet).

It’s still to be added a proper rotation for the planets in time: starting animation you can immediately see how wrongly they rotate around their own axes: the appear in tidal lock with Earth!

And of course Earth must be replaced by Sun, and real Sun-planet distances must be implemented.

Update with labels, array for planets distances (yet to be filled), constant for astronomical unit, fix for angle error (degrees --> radians).
It looks like for texture we could use personal “assets” upload to Cesium personal space, which can be jpg files, but which need a .jgw georeference file which I do not know how to create…

Moved to JSFiddle, so I can save my progress…