3d to 2d camera setView destination when tilting

CesiumJS
1

macOS latest, chrome latest, cesium ^1.32.1

I need any hints you might have on 3d to 2d camera position. The issue appears when pitching in 3d. The 2d map moves losing what is focused on in the 3d scenes. Here is a screencast to demonstrate. Notice how Florida is lost in the 2d pane:

https://youtu.be/fbieW18d1cY

Here is my method so far:

view3d2d (master, slave) {
if (master.scene.mode === SCENE3D) {
const positionDest = master.scene.camera.positionWC.clone()
return {
destination: positionDest.clone()
}
} else {
const cartographicDest = master.scene.camera.positionCartographic.clone()
const positionDest = master.scene.mapProjection.ellipsoid.cartographicToCartesian(cartographicDest)
return {
destination: positionDest.clone(),
orientation: {
heading: master.scene.camera.heading,
pitch: slave.scene.camera.pitch,
roll: slave.scene.camera.roll
}
}
}
}

2

Hi Johnathan,

The issue here is that you’re updating your 2D camera position based on the position of your 3D camera – so when you tilt your master camera and move forward, the 2D camera (which is looking down) position is being updated to be looking at something different. To fix this, update your 2D camera position based on what point your 3D camera is looking at, which is the center of the screen.

To get the center of the screen in world space coordinates, you can use Camera.pickEllipsoid (https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#pickEllipsoid) which takes an x,y position in the Cesium window and returns the position on the ellipsoid. I would recommend just picking the center of the screen, which you can get using viewer.canvas.clientWidth and viewer.canvas.clientHeight and dividing by 2 (rounding up or down).

Once you have the that point, you can set the 2D camera position using Camera.lookAt().

Hope that helps!

  • Rachel
3

Hi Johnathan,

Here’s a working code example: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=3c297bc9b3636a27866455c2b756c0c0

Let me know if you have any questions!

  • Rachel