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

**URL:** <https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102>\
**Category:** CesiumJS\
**Created:** [September 26, 2012, 2:42pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102 "2012-09-26T14:42:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris\_Shenton](https://avatars.discourse-cdn.com/v4/letter/c/f9ae1b/32.png) [@Chris\_Shenton](https://community.cesium.com/u/Chris_Shenton)\
**Post date:** [September 26, 2012, 2:42pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/1 "2012-09-26T14:42:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [September 26, 2012, 2:52pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/2 "2012-09-26T14:52:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [September 26, 2012, 2:55pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/3 "2012-09-26T14:55:39Z")

</div>

The piece you’re missing is the [SceneTransitioner](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/SceneTransitioner.js) 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

---

<div class="post-metadata">

**Author:** ![Chris\_Shenton](https://avatars.discourse-cdn.com/v4/letter/c/f9ae1b/32.png) [@Chris\_Shenton](https://community.cesium.com/u/Chris_Shenton)\
**Post date:** [September 26, 2012, 7:22pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/4 "2012-09-26T19:22:19Z")

</div>

That’s _beautiful_. Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![David3](https://avatars.discourse-cdn.com/v4/letter/d/f475e1/32.png) [@David3](https://community.cesium.com/u/David3)\
**Post date:** [August 4, 2014, 4:20pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/5 "2014-08-04T16:20:47Z")

</div>

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();

``

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/david/32/3484_2.png) [@david](https://community.cesium.com/u/david)\
**Post date:** [August 4, 2014, 4:40pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/6 "2014-08-04T16:40:09Z")

</div>

SceneTransitioner has been removed from the API.

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

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [August 5, 2014, 1:59am UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/7 "2014-08-05T01:59:03Z")

</div>

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

});

---

<div class="post-metadata">

**Author:** ![David3](https://avatars.discourse-cdn.com/v4/letter/d/f475e1/32.png) [@David3](https://community.cesium.com/u/David3)\
**Post date:** [August 5, 2014, 9:48pm UTC](https://community.cesium.com/t/how-to-change-from-3d-to-2d-columbus-view/102/8 "2014-08-05T21:48:19Z")

</div>

awesome thats great thanks!