How to change from 3D to 2D, Columbus view?

CesiumJS
1

The Cesium Wiki architecture document talks about changing the scene view easily:

A scene can be 3D, 2D, or columbus view. A scene can morph between these views with one line of code.

I’ve searched the docs and the combined JS code, and can’t see how this is done. The default 3D view is working beautifully. But if I try:

scene.mode = Cesium.SceneMode.SCENE2D;

I get a black screen. If I try:

scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;

I get my 3D globe (not a flat-ish projection), but my billboard of satellites is now a sinusoidal shape (as I’d expect from a 2D projection) rather than the 3D ring shown in the SCENE3D view. I’m not understanding how to render the CentralBody in the different views. An example in the Architecture doc would help.

Sorry for my ignorance on Cesium. Hopefully I can turn my ignorance into documentation pull requests at some point.

Thanks.

2

Hi Chris,

Create a SceneTransitioner object:

var transitioner = new SceneTransitioner(scene);

And then morph to different modes using morphTo functions:

transitioner.morphTo2D();

transitioner.morphTo3D();

transitioner.morphToColumbusView();

For an example, see Source/Widgets/Dojo/CesiumViewerWidget.js.

As you suggest, documentation contributes are very welcome.

Regards,

Patrick

3

The piece you’re missing is the SceneTransitioner class. This class isn’t well documented but is simple enough that you can just look at the code for reference. Here’s some examples:

var transitioner = new SceneTransitioner(scene)

transitioner.morphDuration2D = 1000; //set morph to 1 second long
transitioner.morphDurationColumbusView(); //morphing affect

transitioner.to2D(); //immediate switch, no morph

2D and Columbus modes (as we ll as scene transitioning) still have a lot of work left to be done, which is why it’s not as polished as some other areas. For example camera position is lost after switching modes and using the camera programmatically in different modes is a little tricky. This should get your started in the mean time though and we’re happy to answer any questions.

Matt

4

That’s beautiful. Thanks! :slight_smile:

5

How did you get it to work? I just want it to start with Columbus view as default. morph is doing nothing for me. Here is my code

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var transitioner = new SceneTransitioner(viewer.scene);
transitioner.morphToColumbusView();

``

6

SceneTransitioner has been removed from the API.

morphTo2D(), morphTo3D(), and morphToColumbusView() are all part of Viewer.Scene now

7

If you’re using Viewer or CesiumWidget and want to start in a specific scene mode, you can just pass an option to the constructor:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

sceneMode : Cesium.SceneMode.COLUMBUS_VIEW

});

8

awesome thats great thanks!