Simplest Hello3DWorld example?

Patrick introduced me to Cesium this summer and I’m hoping to use it to visualize satellite locations. I’m having trouble getting started with a simple HelloWorld-style example – without the code snippets, Dojo and such of the Sandbox.

Ideally, I’d have a simple HTML page that includes the assembled Cesium.js and my sample main.js, and has a which my main.js populates with a globe and sets the view to the center. This is what I’m having trouble with: I’m getting just a fine black canvas.

Are there simple examples folks could point me to? I am missing the high-level picture on how to use the code, and am not a particularly strong JavaScript coder yet.

FWIW, my simple main.js cribbed from Sandbox.js is at http://pastie.org/4716180

Thanks.

Hi Chris,

The reason you are seeing a black canvas is because the scene is not being rendered. Adding the following code (also taken from Sandbox.js) to the end of your main.js (though still within your outer function call) will make the globe appear:

(function tick() {

scene.render();

Cesium.requestAnimationFrame(tick);

}());

It is worth noting that Sandbox was recently deleted from the master branch of Cesium on GitHub in favor of the new Sandcastle app, which offers similar, but much improved, functionality. While many of the Sandcastle demos make use of Dojo (it is on our roadmap to remove Dojo dependencies from the simplest examples), the “Hello World” example (which loads by default) contains starter code (transferable to non-Dojo apps) along with comments explaining where to insert your own modifications.

Hope this helps get you up and running. If you have any more questions, we are more than happy to help.

Thanks!

-Kristian

The reason you are seeing a black canvas is because the scene is not being rendered. Adding the following code (also taken from Sandbox.js) to the end of your main.js (though still within your outer function call) will make the globe appear:

(function tick() {

scene.render();

Cesium.requestAnimationFrame(tick);

}());

Ah, I’d tried “scene.render()” but hadn’t wrapped it like that. Working fine now, many thanks!

It is worth noting that Sandbox was recently deleted from the master branch of Cesium on GitHub in favor of the new Sandcastle app, which offers similar, but much improved, functionality. While many of the Sandcastle demos make use of Dojo (it is on our roadmap to remove Dojo dependencies from the simplest examples), the “Hello World” example (which loads by default) contains starter code (transferable to non-Dojo apps) along with comments explaining where to insert your own modifications.

That looks very helpful, I’ll pull master.

Thanks again.

If you’re new to JavaScript, this code has a bit of subtlety to it that we should probably change in our examples for clarity’s sake. It’s equivalent to:

function tick() {

scene.render();

Cesium.requestAnimationFrame(tick);

}

tick();

That is, tick schedules itself to be run again by calling requestAnimationFrame at the end, which keeps the render loop running, but the original code obscures the fact that we have to kick off the process ourselves once by calling tick.

Not many languages let you both name a lambda (it needs a name so that it can recurse on itself, otherwise you’d need a Y combinator) and execute it in the same statement, but that’s JavaScript for you!