[Solved]: Tileset Rotation about local screen axes

CesiumJS
1

Hello!
Assuming that the tile-set is loaded, a new set of axes needs to be defined, such that the origin is at the center of the tileset, the x-axis is parallel to the horizontal of the screen, y axis is parallel to vertical of the screen and the z axis is perpendicular to screen pointing outwards. I want to provide buttons to rotate the tileset (and the globe) by say 30 degrees about these new x and z axes.
I understand that this is possible with other types of three-d models but I want similar functionality for tilesets.

What should be my approach?
TIA

2

Here are some things I understood working on this. Pl feel free to suggest edits.

  • The correct approach would be to move the camera so that it observes the model from the desired orientations. Following are the relevant reading materials:
  1. Camera
  2. Camera.direction: Keeping the camera at the same position wrt the Earths coords system (ECEF coords). this way we still wont see the tileset from different angles, instead we will see different parts of the tileset and other entities in the scene keeping the camera at the same position. (Like how movies show times square panaromas standing at the same point)
  3. Camera.positon: Changes the position of the camera keeping it pointed in the same direction. (Like how one would see outside a side window of a car on a road trip).
    Following are the functions which can be used to work with these properties of the camera.
  4. camera.flyTo(): Moves the camera to a particular destination position and allows user to point at a particular point by assigning an orientation. It also animates this entire motion which can also be somewhat customised using keywords like duration of flight. Checkout a similar function camera.flyToBoundingSphere()
  5. camera.look(): Keeping the axis constant passing through the camera itself and not an external axis, the camera can be rotated by any particular angle. Similar functions: camera.lookLeft(), camera.lookRight(), camera.lookDown(), camera.lookUp()
  6. camera.rotate(): similar to look() function, but rotations can happen around any axis (which may or may not even pass through the camera) defined anywhere in the scene. Similar functions: camera.rotateUp() etc rotate the camera around the camera’s relevant axis relative to the world coordinate system.
  7. camera.lookAt(): focuses on a target point, while ensuring the offset ensuring the desired distance and orientation which are fed as Cartesian3 or HeadingPitchRange. This function is what I used to solve my problem above. Similar functions: camera.lookAtTransform()
  8. camera.setView(): moves the camera to given destination and orients in the fed orientation. The target/focus is not fed here, instead just the final position and orientation are inputs. This is different from lookAt(), the object/point to be observed is not fed here.
  9. camera.move(): Moves the camera by a certain amount in a particular direction. Similar Functions: camera.moveBackwards() etc…
  • Tilesets work different from other models. Tilesets are geotagged, or “stitched” with an underlying globe according to the coordinates of each point. This means that if I want to rotate the tileset forcefully, it will change the coords of the points on the tileset. Which is why one shouldnt use this method just to visualise it from different angles. Anyways keywords to read up:
  1. Cesium3DTileset
  2. ModelMatrix: Used to rotate the entire tileset

As far as my problem is concerned, I used lookAt() function, as it allowed the user to

  1. orient the camera given the point towards which the camera is to be directed,
  2. keep the zoom under control, as the headingPitchRange.range ensured the appropriate distance of the camera from the tileset.
  3. control the angles of motion (headingPitchRange.heading and headingPitchRange.pitch) of camera in a sphere of radius (= headingPitchRange.range) centered at the point target on the tileset