Camera.lookAt up argument for north

Using the Camera.lookAt, I want to rotate the camera using the z argument but I’m not quite sure what values would represent north in this case.

Pasting my code into Sandcastle:

function createPrimitives(scene) {

var polylines = scene.primitives.add(new Cesium.PolylineCollection());

// A simple polyline with two points.

var polyline = polylines.add({

positions : Cesium.Cartesian3.fromDegreesArrayHeights([-101.609300434162, 17.6681633903656,0,

-101.609300434162, 17.6681633903656, 1000.0]),

material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {

glowPower : 0.25,

color : new Cesium.Color(0.5, 0.5, 0.5, 0.5)

}),

width : 10.0

});

Sandcastle.declare(polyline); // For highlighting on mouseover in Sandcastle.

// A simple polyline with two points.

var polyline1 = polylines.add({

positions : Cesium.Cartesian3.fromDegreesArrayHeights([-101.610300434162, 17.6681633903656,0,

-101.610300434162, 17.6681633903656, 500.0]),

material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {

glowPower : 0.25,

color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)

}),

width : 10.0

});

Sandcastle.declare(polyline1); // For highlighting on mouseover in Sandcastle.

}

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.screenSpaceEventHandler.setInputAction(function(movement) {

var pickedPrimitive = viewer.scene.pick(movement.endPosition);

Sandcastle.highlight(pickedPrimitive);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

var scene = viewer.scene;

var west = -101.64432376748;

var south = 17.6419820268082;

var east = -101.582573037936;

var north = 17.6948647658044;

scene.camera.flyToRectangle({destination: Cesium.Rectangle.fromDegrees(west, south, east, north),

duration: 2.5}

);

createPrimitives(viewer.scene);

Sandcastle.addToolbarButton(‘Tilt’, function() {

var tiltAngle = Cesium.Math.toRadians(350);

var angle = scene.camera.tilt - tiltAngle;

scene.camera.lookAt(Cesium.Cartesian3.fromDegrees(-101.623410104205, 17.6683032692294,2000),Cesium.Cartesian3.fromDegrees(-101.613410104205, 17.6683032692294,0), Cesium.Cartesian3.fromDegrees(-101.623410104205, 17.6683032692294, 2000));

});

Setting the z to Cesium.Cartesian3.fromDegrees(-101.623410104205, 17.6683032692294, 2000) changes the height but doesn’t keep the globe pointing north.

I’m sure I don’t fully understand the z argument. Could someone explain how I would set the z to north?

Thanks,

Zach

Hi Zach,

The last argument to camera.lookAt should be a unit length vector that is the camera’s up direction. For a straight down view, you can get the local north vector like this:

var eyePosition = Cesium.Cartesian3.fromDegrees(-101.623410104205, 17.6683032692294,2000);

var target = Cesium.Cartesian3.fromDegrees(-101.613410104205, 17.6683032692294,0);

var ellipsoid = scene.globe.ellipsoid;

var normal = ellipsoid.geodeticSurfaceNormal(target);

var east = new Cesium.Cartesian3(-target.y, target.x, 0.0);

Cesium.Cartesian3.normalize(east, east);

var north = Cesium.Cartesian3.cross(normal, east, new Cesium.Cartesian3());

scene.camera.lookAt(eyePosition, target, north);

This is almost exactly the code in Transforms.eastNorthUpToFixedFrame to compute a local east-north-up reference frame at a point on an ellipsoid.

Dan