Setting camera position after scene transitions

Question

In Cesium Sandcastle app, I edited Camera tutorial to include the code snippet below:

window.scene = scene;
scene.morphComplete.addEventListener(function (){
    console.log('Morph completed...');
    var west = Cesium.Math.toRadians(10);
    var east = Cesium.Math.toRadians(40);
    var south = Cesium.Math.toRadians(35);
    var north = Cesium.Math.toRadians(45);
    var rectangle = new Cesium.Rectangle(west,south,east,north);    
    window.scene.camera.viewRectangle(rectangle);
    console.log('Camera view rectangle updated...');    
});

The above code hooks to the morph complete event and as soon as the scene transition is completed, view rectangle is set to a region in Europe. At least this is my expected behavior. The observed behaviour is after morph is completed, Cesium view rectangle is in overseas. My question is how can I set map view rectangle after scene transitions?

Answer 1

Looks like this is a bug in our camera handling, apparently we set the camera one last time after firing the morphComplete event.

You can work around it by waiting for one animation frame to pass before taking control of the camera yourself. For example:

scene.morphComplete.addEventListener(function (){
    Cesium.requestAnimationFrame(function() {   // This is the workaround.
        console.log('Morph completed...');
        var west = Cesium.Math.toRadians(10);
        var east = Cesium.Math.toRadians(40);
        var south = Cesium.Math.toRadians(35);
        var north = Cesium.Math.toRadians(45);
        var rectangle = new Cesium.Rectangle(west,south,east,north);
        window.scene.camera.viewRectangle(rectangle);
        console.log('Camera view rectangle updated...');
    });
});

I just filed Issue #2203 for this.