How to sync the rotation of a 3D camera, on a 2d Map

CesiumJS
1

First congratulation on moving to this new forum, it looks amazing and much more friendly than the google talks ^^

I have a question concerning a feature I am trying to develop.

I Have 2 map, a 3D and a 2D Map in my app, The user can move both camera, but the current position and rotation of the 3D camera must be reflected in the 2D map (see Screenshot)

Screenshot_5
Screenshot_51023×781 338 KB

I made it draw on the 2D map thanks to a billboard, and rotate using the rotation property and assigning to it the heading of the camera :

{
      image: 'assets/images/entity/camera.png',
      position: this.camera.position,
      rotation: this.camera.heading,
      id: this.id
 }

but it appear that depending on the place of the globe, the rotation as to be different. For exemple in the above exemple I have to do

-this.camera.heading + 90, but in other place of the world, the calculation is different.

How can I make a formula that make it match everywhere around the globe ?

Thank you

2

Thank you!

I think you may need to express your rotation relative to ENU (east north up) since where “north” is is going to be different depending on where you are in the world, whereas in 2D it’s always pointing straight up. There’s some helper functions here for ENU transforms: Transforms - Cesium Documentation

If you get it to work please post your solution here as I’m sure it’ll be useful for others as well!