Rotating world and other camera flights / animations.

CesiumJS
1

Hello,

I am writing an app in cesium which will be shown without user interact, so I need to a fair few camera things.

Is there a way to do

b: circle around a target slowly but also continuously?

I have played with the CameraFlightPath - and that takes a destination. I guess I could use the “onComplete” callback to build a manual loop to do what I need - I was just hoping there would be a nicer way.

Thanks again.

Toby

oh and p.s. have started using the latest version and very much like the polyline style improvements! Nice job.

2

Hi Toby,

You should check out the methods on the CameraController. To have the camera rotate around the globe continuously, every frame call:

scene.getCamera().controller.rotateRight(angle); // or rotateLeft

To have the the camera rotate around a target, do the same as above, but first set the camera reference frame and position the camera to look at the target:

var camera = scene.getCamera();

camera.transform = …; // for instance, Cesium.Transforms.eastNorthUpToFixedFrame(targetPosition)

camera.controller.lookAt(cameraPosition, targetPosition, upDirection);

I hope that helps.

Regards,

Dan

3

Hello Daniel sir,

Can you please elaborate more that where to add

scene.getCamera().controller.rotateRight(angle); // or rotateLeft

What is meant by every frame call?
Actually I am new to this technique that’s why I am asking this question, it may be silly so please excuse me for it. I am continuously trying to understand this but if you help me then it will be easy for me to implement.

4

Hi Surabhi,

Here is the code of the modified Cesium Viewer Widget Sandcastle example that rotates the camera:

require([

‘Cesium’, ‘Widgets/Dojo/CesiumViewerWidget’, ‘dojo/io-query’

], function(

Cesium, CesiumViewerWidget, ioQuery) {

“use strict”;

// Parse URL configuration options into endUserOptions

var endUserOptions = {};

if (window.location.search) {

endUserOptions = ioQuery.queryToObject(window.location.search.substring(1));

}

// Initialize a viewer capable of drag-and-drop

// and user customizations.

var widget = new CesiumViewerWidget({

endUserOptions : endUserOptions,

enableDragDrop : true

});

widget.placeAt(‘cesiumContainer’);

widget.autoStartRenderLoop = false;

widget.startup();

function updateAndRender() {

widget.initializeFrame();

var time = widget.update();

widget.scene.getCamera().controller.rotateRight(0.001);

widget.render(time);

Cesium.requestAnimationFrame(updateAndRender);

}

Cesium.requestAnimationFrame(updateAndRender);

Sandcastle.finishedLoading();

});

5

Thanks you very much sir. Now its working.

But globe is continuously rotating, if I want to add a control to stop and start rotation of globe then is it possible to add such control and if yes then how to execute it?

6

Hi Dan,

So I’ve been trying this quite a lot and struggling with it a fair bit! Figuring out the whole direction / up etc is pretty tricky. (An explanation of what is what would be good). I presume the direction is the way the camera is facing? And the up? The angle at which it is looking? That’s what I would logically expect but how can the “up” have to be in a Cartesian3 format.

Anyway - what I’ve got is the following:

Two points;

p1

Cartesian3 {x: 2262525.9099753425, y: 833478.7857226268, z: 5885024.111380975, getMaximumComponent: function, getMinimumComponent: function…}

  1. x: 2262525.9099753425
  2. y: 833478.7857226268
  3. z: 5885024.111380975

p2

Cartesian3 {x: 6620669.785912072, y: 597247.5672878108, z: -2455418.580647144, getMaximumComponent: function, getMinimumComponent: function…}

  1. x: 6620669.785912072
  2. y: 597247.5672878108
  3. z: -2455418.580647144

And what I would like is for the camera to fly to a location and then pan to a view that would mean that p1 is in the foreground, visible, and p2 is visible in the background.

This is what I’ve got so far;

var destination = ellipsoid.cartesianToCartographic(p1);

destination.height = 1000000;

moveEarth = false;

activateFlyBy = false;

var flight = Cesium.CameraFlightPath.createAnimationCartographic(scene.getFrameState(), {

destination: destination,

direction: p2,

// up: p2,

onComplete: function () {

var camera = scene.getCamera();

//camera.transform = Cesium.Transforms.eastNorthUpToFixedFrame(p2);

camera.controller.lookAt(camera.getPositionWC(), p1, p1);

}

});

So the flight flies to the location of p1 (at a static height as defined), fine. Then I’m trying to set the view - but completely lost as to how. I get some pretty psychedelic animations happening, which are cool - but unwanted! :slight_smile:

Any help would be appreciated.

Thanks

Toby

7

Hi Toby,

Yes, the direction is the unit vector in the direction the camera is looking. If the camera is you head, you can think of the up unit vector as the vector coming out of your head. If you tilt your head to the side the up direction changes and so does the view. The direction vector isn’t enough to orient the camera. Using the same metaphor, we need to know the direction your facing and how your head is tilted to display anything.

From what I understand, you want to fly to p1 and look at p2? Or do you want to fly to a point where both p1 and p2 are visible?

The second one is not so easy, but I may have some code similar to what you want that we can work with. Its also on the camera road map.

Dan

8

Hi Dan,

Yes you’re right - I’d like to show both p1 and p2… just to make it increasingly annoying - p1 will always be static, p2 will move every 5 seconds (ground station + satellite)… I’d love it to keep p1 in the foreground and keep p2 in the middle of the back ground (i.e. turning with the angle they create)…

Thanks for your help so far…

Toby