CesiumJS

[CesiumJS]Cesium Getting Started 8 - Configuring the Scene

Next, we’ll add some more correct time and space settings to the Viewer. This involves interacting with viewer.scene, which controls all graphical elements in the viewer.

  1. First, let’s configure our scene by enabling lighting based on the sun’s position with the following code:
1
2

// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

With this configuration, the lighting in our scene will change with the time of day. If you zoom out, you’ll see that part of the digital globe is in darkness, because like the real Earth, the sun can only illuminate part of it.

  1. Before we initialize and start the view, let’s briefly go over some basic Cesium types:
  • Cartesian3 : A 3D Cartesian coordinate – when used as a position relative to the center of the Earth, it uses the Earth-Fixed reference frame (ECEF).
  • Cartographic : A position defined by longitude, latitude (in radians), and height above the WGS84 ellipsoid surface.
  • HeadingPitchRoll : A rotation (in radians) about the local axes in an east-north-up frame. Heading is a rotation about the negative Z axis. Pitch is a rotation about the negative Y axis. Roll is a rotation about the positive X axis.
  • Quaternion : A 3D rotation represented as a 4D coordinate.

These are the basic types needed to position and orient Cesium objects in the scene, and they have many useful conversion methods. See the documentation for each type to learn more.

Now let’s position the camera on the NYC (New York) scene where our data is located.

Camera Control

The camera is a property of viewer.scene that controls the currently visible domain. We can control the camera by directly setting its position and orientation, or by using the API provided by Cesium, which is designed to specify how the camera’s position and orientation change over time.

Some of the most commonly used methods are:

For more API features, check out these camera demos:

Let’s try one method to fly the camera to New York. Use camera.setView() to initialize the view, specifying the camera position and orientation with Cartesian3 and HeadingPitchRoll:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

The camera is now positioned and oriented to overlook Manhattan, and our view parameters are saved in an object that can be passed to other camera methods.

In fact, we can use this same view to update the behavior when the home button is pressed. Instead of having it return to the default view of the Earth from a distance, we can override the button to show our initial Manhattan view. We can add a few options to adjust the animation, then add an event listener to cancel the default flight and call flyTo() with our home view:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

For more about basic camera control, please visit our Camera Tutorial.

Clock Control

Next, let’s configure the Viewer’s Clock and Timeline to control the scene’s time progression.

Here is the Clock-related API.

When working with specific times, Cesium uses the JulianDate type, which stores the number of days since noon on January 1, -4712 (4713 BC). For increased precision, this class stores the whole number of days and seconds in separate components. For computational safety and to represent leap seconds, dates are always stored in the International Atomic Time standard.

Here is an example of how to set up scene time options:

1
2
3
4
5
6
7
8
9

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

This sets the scene animation’s rate, start and stop times, and tells the clock to loop back to the start when it reaches the stop time. It also sets the timeline control to the appropriate time range. Check out this clock sample code to test clock settings.

This is our initial scene configuration! Now, when you run your application, you should see the following:

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/160.html | China fast access: http://cesium.coinidea.com/topic/160.html