I am having a problem determining how to change the camera pitch from via the keyboard.

CesiumJS
1

I have looked at the camera tutorial when the user presses my defined key to change the pitch I call the camera.setView method incrementing the pitch attribute by the default rotate amount.

This seems to work fine when the scene is in 3D mode, but while in Columbus view it appears that the camera position is being changed.

Does anyone have an idea on how to accomplish this?

Thanks in advance

Jerry Stoy

2

Can you post a working example of your code for us to help you with, something that we can paste into Sandcastle would be great.

3

Matt,

Here is the sandcastle example. I tried it at home (safari) and it looks ok. I'll try it at again at work (firefox) and will let you know.

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var canvas = viewer.canvas;

canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas

canvas.onclick = function() {

    canvas.focus();

};

var ellipsoid = scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;
var mousePosition;
var flags = {
    looking : false,
    moveForward : false,
    moveBackward : false,
    moveUp : false,
    moveDown : false,
    moveLeft : false,
    moveRight : false,
    pan : false,
    unPan : false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
    flags.looking = true;
    mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
    mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
    flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

function getFlagForKeyCode(keyCode) {
    switch (keyCode) {
    case 'W'.charCodeAt(0):
        return 'moveForward';
    case 'S'.charCodeAt(0):
        return 'moveBackward';
    case 'Q'.charCodeAt(0):
        return 'moveUp';
    case 'E'.charCodeAt(0):
        return 'moveDown';
    case 'D'.charCodeAt(0):
        return 'moveRight';
    case 'A'.charCodeAt(0):
        return 'moveLeft';
    case 'P'.charCodeAt(0):
        return 'pan';
    case 'U'.charCodeAt(0):
        return 'unPan';

    default:
        return undefined;
    }
}

document.addEventListener('keydown', function(e) {
    var flagName = getFlagForKeyCode(e.keyCode);
    if (typeof flagName !== 'undefined') {
        flags[flagName] = true;
    }
}, false);

document.addEventListener('keyup', function(e) {

    var flagName = getFlagForKeyCode(e.keyCode);
    if (typeof flagName !== 'undefined') {
        flags[flagName] = false;
    }
}, false);

viewer.clock.onTick.addEventListener(function(clock) {
    var camera = viewer.camera;

    if (flags.looking) {
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;

        // Coordinate (0.0, 0.0) will be where the mouse was clicked.
        var x = (mousePosition.x - startMousePosition.x) / width;
        var y = -(mousePosition.y - startMousePosition.y) / height;

        var lookFactor = 0.05;
        camera.lookRight(x * lookFactor);
        camera.lookUp(y * lookFactor);
   }

    // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
    var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
    var moveRate = cameraHeight / 100.0;

    if (flags.moveForward) {
        camera.moveForward(moveRate);
    }

    if (flags.moveBackward) {
        camera.moveBackward(moveRate);
    }

    if (flags.moveUp) {
        camera.moveUp(moveRate);
    }

    if (flags.moveDown) {
        camera.moveDown(moveRate);
    }

    if (flags.moveLeft) {
        camera.moveLeft(moveRate);
    }

    if (flags.moveRight) {
        camera.moveRight(moveRate);
    }

    if (flags.pan) {
       //console.warn(scene.camera.pitch);
       scene.camera.setView({
           pitch : (scene.camera.pitch + scene.camera.defaultRotateAmount * 5)
       });
    }

    if (flags.unPan) {
        //console.warn(scene.camera.pitch);
        scene.camera.setView({
            pitch : (scene.camera.pitch - scene.camera.defaultRotateAmount * 5)
        });
    }
});