camera.lookat causes camera control problems

CesiumJS
1

Hello,

I recently changed my initial view of my map from a top-down birdseye view to a view from an angle.

I went from this code:

var camera = $scope.czm.scene.camera;

// var lat = 40.03883;

// var lon = -75.59777;

var lat = 38.915647;

var lon = -77.069754; // set back to -79.0698

var epsilon = 0.000400;

var west = parseFloat(lon) - epsilon;

var north = parseFloat(lat) + epsilon;

var east = parseFloat(lon) + epsilon;

var south = parseFloat(lat) - epsilon;

var scene = $scope.czm.scene;

var ellipsoid = Cesium.Ellipsoid.WGS84;

var extent = new Cesium.Rectangle.fromDegrees(west, south, east, north);

camera.viewRectangle(extent, ellipsoid);

to this code using camera.lookat to achieve the angled initial view:

var camera = $scope.czm.scene.camera;

// var lat = 40.03883;

// var lon = -75.59777;

var lat = 38.915647;

var lon = -77.069754; // set back to -79.0698

var epsilon = 0.000400;

var west = parseFloat(lon) - epsilon;

var north = parseFloat(lat) + epsilon;

var east = parseFloat(lon) + epsilon;

var south = parseFloat(lat) - epsilon;

var scene = $scope.czm.scene;

var ellipsoid = Cesium.Ellipsoid.WGS84;

var center = Cesium.Cartesian3.fromDegrees(lon, lat);

var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

Cesium.Matrix4.clone(transform, camera.transform);

camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;

camera.lookAt(

new Cesium.Cartesian3(-100.0, -150.0, 150.0),

Cesium.Cartesian3.ZERO,

Cesium.Cartesian3.UNIT_Z);

var position = ellipsoid.cartographicToCartesian(

new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat), 0));

var screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position);

The problem is that now I can no longer pan to the side using the touchpad/mouse commands that worked in the rectangular view. I think the constrained axis has changed the way my code sees the view and now when I try to pan over it turns the view on its axis. How can I initialize my map at an angle and also maintain the base camera controls for panning and angle changes (ex: holding shown command and using my touch pad will bring my camera closer to the ground).

2

Hey Vanessa,

I ran into the same problem with using the camera.lookat and loosing translation of the scene. Were you able ever to figure out why this happens?

Zachary Feldman

3

I had to readjust the camera.move code to compensate for the new angle.

I got the code from Hyper Sonic:
https://cesiumjs.org/forum.html#!msg/cesium-dev/AnDR7zI0QlU/nTsgdF8qndUJ

      function moveButton(amount) {
        var camera = $scope.czm.scene.camera;
        var currentPos = camera.positionCartographic;
        var CC3 = Cesium.Cartesian3;
        var nadir = new CC3();
        var temp = new CC3();
        Cesium.Ellipsoid.WGS84.geodeticSurfaceNormalCartographic(currentPos, nadir);
        CC3.negate(nadir,nadir); //zenith to nadir
        var scalar = CC3.dot(camera.direction,nadir);
        CC3.multiplyByScalar(nadir,scalar,temp);
        CC3.subtract(camera.direction,temp,temp); //remove downward component
        camera.move(temp,amount);
      }

4

Thanks for getting back to me! I found a solution that worked for me as well. It’s a one liner that restored normal mouse controls. It’s camera.lookAtTransform(Cesium.Matrix4.IDENTITY); I just placed that after the .lookAt()

5

One thing to be aware of is that the camera.lookat was deprecated a few releases ago, so please do not rely on it if you plan on using the latest version of Cesium at some point.