Camera and view control
Quick answer
This tutorial separates camera position from orientation and shows how destination plus orientation define a view in CesiumJS. It compares camera.setView, camera.flyTo, camera.lookAt and viewer.zoomTo, then explains heading, pitch and roll angles and why pitch must stay within minus 90 to 0 degrees. It also covers flyToBoundingSphere with HeadingPitchRange offsets, screenSpaceCameraController limits and capturing views through positionCartographic. Readers can frame any scene deterministically and restore it exactly.
Key points
- Use camera.setView with both destination and orientation; omitting orientation keeps the previous tilt.
- Clamp pitch between -90 and 0 degrees; positive values are ignored or break positioning.
- Pass duration to flyTo and call cancelFlight before chaining, or the new flight takes over.
Example
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.391263, 39.907359, 3000),
orientation: {
heading: Cesium.Math.toRadians(20),
pitch: Cesium.Math.toRadians(-45),
roll: 0
}
});var sphere = new Cesium.BoundingSphere(
Cesium.Cartesian3.fromDegrees(116.391263, 39.907359, 0),
500
);
viewer.camera.flyToBoundingSphere(sphere, {
duration: 2,
offset: new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(45), // 从东北方向看
Cesium.Math.toRadians(-35),
1500 // 距离中心 1500 米
)
});Notes
- duration: 0 makes flyTo jump instantly, which looks like a broken animation but is intended.
- A negative destination height puts the camera inside the globe and the screen goes black.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Camera and view control. https://www.jingweizhi.com/en/cesium/tutorials/camera.html (accessed 2026-11-03).