How to sync views even if main camera is up side down?


I'm trying to synchronize two views like in the sandcastle example.

While moving the camera up, the heading of the synced view becomes incorrect when I go over the pole (it is still with north up, though it should be south up). I wish the two views to behave the same way and to avoid this.

Can you help with this please?

// We want our two views to be synced across time, so we create
// a shared clock object that both views share
var clockViewModel = new Cesium.ClockViewModel();
var options3D1 = {
    fullscreenButton : false,
    sceneModePicker : false,
    clockViewModel : clockViewModel
var options3D2 = {
    homeButton : false,
    fullscreenButton : false,
    sceneModePicker : false,
    clockViewModel : clockViewModel,
    infoBox : false,
    geocoder : false,
    //sceneMode : Cesium.SceneMode.SCENE2D,
    navigationHelpButton : false,
    animation : false
// We create two 3D viewers
// The CSS is set up to place them side by side
var view3D1 = new Cesium.Viewer('view3D', options3D1);
var view3D2 = new Cesium.Viewer('view2D', options3D2);

var worldPosition;
var distance;

function sync2DView() {
    // The center of the view is the point that the 3D camera is focusing on
    var viewCenter = new Cesium.Cartesian2(Math.floor(view3D1.canvas.clientWidth / 2), Math.floor(view3D1.canvas.clientHeight / 2));
    // Given the pixel in the center, get the world position
    var newWorldPosition =;
    if (Cesium.defined(newWorldPosition)){
        // Guard against the case where the center of the screen
        // does not fall on a position on the globe
        worldPosition = newWorldPosition;
    // Get the distance between the world position of the point the camera is focusing on, and the camera's world position
    distance = Cesium.Cartesian3.distance(worldPosition,;
    // Tell the 2D camera to look at the point of focus. The distance controls how zoomed in the 2D view is
    // (try replacing `distance` in the line below with `1e7`. The view will still sync, but will have a constant zoom), new Cesium.Cartesian3(0.0, 0.0, distance));

// Apply our sync function every time the 3D camera view changes;
// By default, the `camera.changed` event will trigger when the camera has changed by 50%
// To make it more sensitive, we can bring down this sensitivity = 0.000000001;

// Since the second view follows the first view, we disable any
// camera movement on the second view
view3D2.scene.screenSpaceCameraController.enableRotate = false;
view3D2.scene.screenSpaceCameraController.enableTranslate = false;
view3D2.scene.screenSpaceCameraController.enableZoom = false;
view3D2.scene.screenSpaceCameraController.enableTilt = false;
view3D2.scene.screenSpaceCameraController.enableLook = false;

var main_interval = setInterval(moveup, 10);

function moveup() {, 0.001);

Cesium 1.50
Chrome 70

That example was written specifically to sync a 3D and a 2D view. You can see how it copies over the position but fixes the offset in this line:, new Cesium.Cartesian3(0.0, 0.0, distance));


If you just want to move the two cameras together, you can just apply the rotation to both of them:, 0.003);, 0.003);


Here’s a Sandcastle example.

You can also just copy the destination and orientation of the first camera onto the second:

var camera1 =;

var camera2 =;

camera1.rotate(camera1.right, 0.003);


destination : camera1.position,

orientation : {

heading : camera1.heading,

pitch : camera1.pitch,

roll : camera1.roll,




Here’s a Sandcastle for that.

Thanks, that solved my issue.