This guide will show you how to work with the camera API in CesiumJS and implement functions like fly to a point on earth, zoom to a data source in the scene, or lock the camera to a specific model.
- Know how to set up a basic CesiumJS application.
New to Cesium? For help setting up an app for the first time, start with the Quickstart tutorial.
Fly to a location
If you know the latitude, longitude, and height of the location, you can use the camera’s
flyTo function to fly directly to that location in CesiumJS. For instance, to fly to San Diego, we pass in -117.16, 32.71, and 15000.0 for longitude, latitude, and height respectively:
To change the orientation of the camera once flyTo has completed, add an
The heading, pitch, and roll here are relative to East, North, and Up respectively.
Get location of a point
If you know the name of the location you want to fly to but are not sure what the coordinates of that location is, you can use
pickPosition to find out. The following code snippet will print out the location of a point in
Cartesian3 on click:
Fly to an asset
If you have added an asset to your scene and want to focus the camera on it, you can use viewer’s
viewer.flyTo function takes in an
Cesium3DTilset, and much more.
For example, focus on a rectangle
Entity that has been added to the scene with this code snippet:
Create an easing function
An option to the
camera.flyTo function is
easingFunction. An easing function controls how the time is interpolated during a camera flight duration. The following code example sets the easing function to
QUADRATIC_IN_OUT to fly from the Tokyo Skytree to Seattle Space Needle:
Look at a point
Beside flying to a point on the globe, you can also lock the camera to a point. This comes in handy when you want to restrict the camera’s movements to a region or asset.
To lock the camera to a point, use the camera’s
lookAtTransform function. The following code snippet locks the camera to Mount Fuji, Japan:
Orbit around a point
Once you have the camera locked to a point, you can create a camera orbit to showcase your asset. This can be achieved by using the camera’s
lookAtTransform function with an event listener:
Screen space camera controller
ScreenSpaceCameraController converts user input, such as mouse and touch, from window coordinates to camera motion. It contains properties for enabling and disabling different types of input, modifying the amount of inertia and the minimum and maximum zoom distances.
For instance, you can use the
ScreenSpaceCameraController to control whether the camera is allowed to go underground:
Check out the camera examples in Sandcastle:
- Camera Tutorial - Code example of camera movements.
- Camera - Code examples to fly to locations, view extents, and set the camera’s reference frame.
Also, check out the reference documentation: