Camera heading and pitch

CesiumJS
1

Hi,

Im new to Cesium and Im trying to visualize the flight of a octocopter by adjusting the internal camera of Cesium by providing the angle of heading (related to North) and pitch (related to horizontal axis) from real world data.

As a good starting point I found the following procedures, which are setting the camera to a initial position (lat/lng) and adjust the camera to its horizontal view looking to north. Thats fine.

Right now, Im stucking in to set heading and pitch (in degrees). Seems to be a bit more complicated that expected ;-))) Well, would be great, if somebody could give me a little hint on this, so that I can dive in a bit more in detail.

Many thanks in advance....

Markus

function flyToMyLocation(scene) {
        function fly(position) {
            var destination = Cesium.Cartographic.fromDegrees(8.660210734815337,51.93550431582044, 500.0);
            destination = ellipsoid.cartographicToCartesian(destination);
            var flight = Cesium.CameraFlightPath.createAnimation(scene, {
                destination : destination
            });
            scene.getAnimations().add(flight);
        }
        navigator.geolocation.getCurrentPosition(fly);
    }
    
    function setCamera(scene) {
        var camera = scene.getCamera();
                camera.controller.lookAt(
                ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(8.660210734815337,51.93550431582044, 600.0)),
                ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(0,90, 600.0)), // look to North
                Cesium.Cartesian3.UNIT_Z);
    }

2

Hi Markus,

Did you try setting the heading property on the CameraController? Try:

camera.controller.heading = Cesium.Math.toRadians(angle);

I believe you can change the pitch using the look functions. Try one of these:

camera.controller.lookUp

camera.controller.lookDown

Dan

3

Hi Dan,

thanks for your fast reponse. Yep, now I managed to set a pitch value with lookDown. Thanks for this.

I also tried to set the heading with lookRight, but I get an unexpected result, as the camera beginns to roll, but not rotate on its horizontal orientation (as I expected). I also tried the same with "look" (see screen)
http://freyt.de/screen.png

What is the wrong thinking when expecting lookRight will just rotate around z-axis of the camera and not roll the camera on its y-axis? To be honest. Im no more sure, if the camera is vertical aligned to ground in its original position set with LookAt...

How to get the camera look with heading to 40 degrees then?

Would be nice to get some more hints....Many, many thanks.

Markus

4

Hi,

found a different approach, which works for me quite well

function setCamera2(scene, lat, lon, height, direction, pitch, roll) {
    scene.initializeFrame();
    var camera = scene.getCamera();
    camera.position = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lon,lat,height));
    // reset the direction to point towards the center of the earth
    Cesium.Cartesian3.negate(camera.position, camera.direction);
    Cesium.Cartesian3.normalize(camera.direction, camera.direction);
    // orient so that 'up' is pointing north
    Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Z, camera.up);
    Cesium.Cartesian3.cross(camera.direction, camera.up, camera.right);

    camera.controller.look(camera.direction, Cesium.Math.toRadians(0 - direction));
    camera.controller.lookUp(Cesium.Math.toRadians(90 + pitch)); // move up camera to north
    camera.controller.look(camera.direction, Cesium.Math.toRadians(roll)); // roll camera
    // render scene
    scene.render();

}

Function call would be like this:
setCamera2(widget.scene, 51.93550431582044, 8.660210734815337, 1000, 40, 0, 10);

Thanks again...

Markus