Removing Camera Tilt In Cesium: A Step-By-Step Guide

The CesiumJS camera functionality has been a source of community forum questions and complaints. Users have reported issues with ending up underground or getting lost in the scene due to rapid mouse movements resulting in extreme camera tilts. To address this, Cesium developers have considered adding a limitTilt() function to the Camera object. While this feature has been recognised as desirable, it has not been prioritised for implementation. In the meantime, a suggested workaround is to remove the clamp on tilt values in the set implementation, allowing users to look up or down without restrictions. Additionally, users can disable the fog effect in the scene to remove the blue atmosphere that appears when tilting the camera.

Limit camera tilting to prevent users from getting lost in the scene

There has been a significant history of community forum questions and complaints regarding the camera functionality in CesiumJS. Users have reported issues with ending up "underground" or getting lost in the scene by moving the mouse rapidly to tilt the camera to view both extremes (+90 degrees, -90 degrees). This can be disorienting and negatively impact the user experience.

To address this issue, it has been suggested to add an additional function called limitTilt() to the Camera object. This function would restrict the camera's tilt movement, preventing users from tilting the camera to extreme angles that can cause disorientation. By limiting the tilt range, users can remain oriented within the scene and avoid encountering issues such as ending up "underground".

Another suggestion is to introduce a "maximumTilt" property for the Camera. This property would allow users to set a maximum tilt angle, providing a similar benefit to the limitTilt() function by restricting the camera's tilt movement. This property would give users more control over their camera experience and help prevent disorientation.

In addition to these proposed solutions, it is worth noting that some community members have expressed their support for this feature. They emphasize the importance of limiting camera tilt to avoid the problems that can occur when tilting the scene, including getting lost in the scene or encountering a state that Cesium cannot recover from. These issues have been documented in various forum posts and videos, highlighting the need for improvements to the Camera API.

By implementing features such as limitTilt() or a "maximumTilt" property, Cesium can enhance the user experience and provide a more stable and user-friendly camera functionality. These measures will help prevent users from getting lost in the scene and ensure a smoother navigation experience within the CesiumJS environment.

Remove the blue atmosphere/surface when tilting the camera

To remove the blue atmosphere/surface when tilting the camera in Cesium, you can try disabling specific features and adjusting settings. Here are the steps you can follow:

Set the following properties to false:

Viewer.scene.skyBox.show = false;

Viewer.scene.sun.show = false;

Viewer.scene.moon.show = false;

Viewer.scene.skyAtmosphere.show = false;

Set the background color and base color to black:

Viewer.scene.backgroundColor = Cesium.Color.BLACK;

Viewer.scene.globe.baseColor = Cesium.Color.BLACK;

Disable additional features:

Viewer.scene.fxaa = false;

Viewer.scene.globe.depthTestAgainstTerrain = false;

Viewer.scene.globe.enableLighting = false;

Viewer.scene.globe.showWaterEffect = false;

Viewer.scene.imageryLayers.removeAll();

Check the Sandcastle example:

Visit the provided link (http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases) and select "Fly to Rectangle". Then, use CTRL + Left Mouse to tilt the camera and observe the result.

If the issue persists, try disabling the fog effect:

Viewer.scene.fog.enabled = false;

By following these steps, you should be able to remove the blue atmosphere/surface when tilting the camera in Cesium. Remember to adapt the code to your specific implementation and requirements.

Set the camera look from a heading, tilt and roll

To set the camera look from a heading, tilt, and roll, you can control the camera position and orientation by setting the LatLngAlt for the position and Heading, Tilt, and Roll for the orientation.

// code snippet

Var position = Cesium.Cartesian3.fromDegrees(lng, lat, cameraAlt, ellipsoid, new Cesium.Cartesian3());

Var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);

Camera.transform = transform;

Var yDir = Cesium.Matrix4.multiplyByPointAsVector(bodyModel.modelMatrix, Cesium.Cartesian3.UNIT_Y, new Cesium.Cartesian3)();

Cesium.Matrix4.multiplyByPointAsVector(this.camera.inverseTransform, yDir, yDir);

Cesium.Cartesian3.negate(yDir, yDir);

Var rZ = Cesium.Matrix3.fromRotationZ(getVehicleHeading() - cameraHeading, new Cesium.Matrix3());

Var rotatedZ = new Cesium.Cartesian3();

Cesium.Matrix3.multiplyByVector(rZ, yDir, rotatedZ);

Cesium.Cartesian3.add(yDir, rotatedZ, yDir);

Camera.lookAt(yDir, Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);

In this code snippet, the camera position is set based on the longitude, latitude, and altitude (lng, lat, cameraAlt) using `Cesium.Cartesian3.fromDegrees()`. The transform is then set using `Cesium.Transforms.eastNorthUpToFixedFrame()`. The y-direction `yDir` is calculated by multiplying the model's y-axis by the camera's inverse transform. The rotation around the z-axis is calculated using `Cesium.Matrix3.fromRotationZ()` and applied to `yDir` to get `rotatedZ`. Finally, `yDir` and `rotatedZ` are added together, and the camera looks at this final position using `camera.lookAt()`.

To set the orientation of the camera, you can use the camera.heading, camera.tilt, and camera.twist() functions. For example:

Camera.heading = heading;

Camera.tilt = tilt;

Camera.twist(roll);

By adjusting the values of `heading`, `tilt`, and `roll`, you can control the orientation of the camera.

Clamp the tilt angle to prevent upside-down views

To prevent upside-down views, the tilt angle of the camera in Cesium can be clamped or limited. This means that the camera's tilt range is restricted to prevent it from rotating past a certain axis or angle. Here are some steps and considerations to achieve this:

Firstly, it is important to understand the camera's properties and how tilt angle clamping can be implemented. The camera in Cesium is defined by its position, orientation, and view frustum. The tilt angle specifically relates to the camera's pitch, which can be accessed and modified. By default, the tilt angle may be clamped to a specific range, typically between 0 and pi/2 radians (or 90 degrees), which restricts the camera from looking up or turning upside down. However, this default clamping behaviour can be modified to achieve the desired tilt angle range.

To clamp the tilt angle, you can adjust the camera's properties directly or use the ScreenSpaceCameraController. Here are some approaches:

• Modify the Camera's Properties: You can access the camera's pitch property and adjust its value to your desired tilt angle. By setting the pitch property, you can effectively clamp the tilt angle to your desired range. This can be done by retrieving the camera object and using the "setView" method to update its orientation with the desired heading, pitch, and roll values.
• Use ScreenSpaceCameraController: Another way to clamp the tilt angle is by utilizing the ScreenSpaceCameraController, which provides additional camera control options. You can disable specific tilt event types, such as "viewer.scene.screenSpaceCameraController.tiltEventTypes = undefined;" to prevent the camera from responding to certain input events that may cause it to tilt. This allows you to have more control over the tilt angle using other input methods.
• Implement Custom Keyboard Controls: If you want to control the tilt angle using the keyboard, you can add custom camera keyboard events as mentioned in the Cesium camera tutorial (http://cesiumjs.org/tutorials/Camera-Tutorial/). You can use functions like "camera.LookUp" or "camera.rotateUp" to adjust the tilt angle by a specified angle in radians. This approach gives you precise control over the tilt angle using keyboard input.
• Consider Community Suggestions: There have been discussions within the Cesium community about limiting camera tilting to prevent issues such as ending up "underground" or getting lost in the scene due to excessive tilting. Some community members have suggested adding a "limitTilt()" function to the Camera object or introducing a "maximumTilt" property. While these suggestions may not be implemented by default, they can provide insights into how others have approached this problem.

Remember that clamping the tilt angle can enhance the user experience by preventing disorienting views and ensuring the camera remains within a reasonable range of motion. You can adjust the clamping based on your specific use case and the desired level of camera freedom for your application.

Add a roll property to the camera

The camera in Cesium is defined by a position, orientation, and view frustum. The orientation forms an orthonormal basis with a view, up, and right = view x up unit vectors. The viewing frustum is defined by 6 planes, each represented by a Cartesian4 object. The camera API in CesiumJS allows you to implement functions such as flying to a point on Earth, zooming in on a data source in the scene, or locking the camera to a specific model.

To add a roll property to the camera, you can use the camera.twist(angle) function, which rotates the orientation vectors around the camera's direction vector. This was suggested by Daniel Bagnell, a contributor to the Cesium project, in response to a question about setting the camera lookAt from a heading, tilt, and roll. Bagnell also suggested that you may need to keep track of the current roll and modify the angle parameter based on the current and new roll angles.

Viewer.camera.flyTo({

Destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),

Orientation: {

Pitch: Cesium.Math.toRadians(-35.0),

Roll: camera.twist(angle)

},

});

In this example, the flyTo function is used to fly the camera to a specific destination, in this case, San Diego. The orientation option is added to change the orientation of the camera once flyTo has completed. The heading, pitch, and roll values are specified in radians and are relative to East, North, and Up, respectively. The roll value is calculated using the twist function, which takes an angle as input and returns the roll value.

You can also use the camera.roll property to get the camera roll in radians. This property allows you to retrieve the current roll value of the camera and use it in your calculations.

By adding a roll property to the camera, you can have more control over the camera's orientation and create more dynamic and interactive scenes in Cesium.

Frequently asked questions