How to change camera position based on time and look up and down?

CesiumJS
1

I have an array of times and positions I want the camera to move to…

[{time: <Time 1>, latitude: , longitude:},{time: <Time 1>, latitude: , longitude:},{time: <Time 1>, latitude: , longitude:}]

I want to make it so that when the camera moves to the positions, I can freely look up, down, etc. as I wish with the mouse. Right now I am doing the following:

var i = 0;

viewer.clock.onTick.addEventListener(function(clock) {

if(clockDate >= myList[i]) {

viewer.camera.setView({

position : Cesium.Cartesian3.fromDegrees(myList[i].longitude, myList[i].latitude, 5)

});

i++;

}

});

I thought by not setting the heading or pitch, I would be able to use my mouse and pan/tilt as a please (just not change position).

Is there some way to do this? As an aside… is what I am doing the ideal way to do what I am trying to do?

2

If this is not possible, please let me know.

3

Do you want to put the camera itself at those positions, or rather put the camera near those positions while looking at them? After that do you want the camera to rotate around that point, or rotate around the Earth?

I don’t think there’s a built-in react to input method for spinning the camera around it’s own axis, though you can make your own functions as this SandCastle app did.

Here’s that SandCastle app with just the camera look code (edited out the movement code)

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,
};
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);

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);
}

});

``

4

Put the Camera itself that that position in the list.

Camera rotating around the point, not the earth.

The user is free to look up, down, etc etc. as they wish. They just can’t move the camera off of the position its at.

5

The code I listed (which is just code extracted from the Camera Tutorial SandCastle app) will allow the user to rotate the camera about its center. (though only yaw/pitch, but roll could be added also.) Combine that with your code and it should work just fine. It also disables the default movements.