Cesium Introduction 8 - Configuring the Scene - Configuration Window

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

  1. First, let's configure our scene to activate sun-based illumination with the following code:
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

According to the above configuration, the light in our scene will change with the time of day. If you zoom out, you will see that part of the digital earth is in darkness, because simulating the real earth, the sun can only shine on a part of the earth.

  1. Before we start initializing the boot view, let's briefly review some of the underlying Cessium types:
  • Cartesian3 A three-dimensional Cartesian coordinate, using the Earth Fixed Frame (ECEF) when it is used as a position relative to the center of the Earth.
  • Cartographic Location determined by longitude, latitude (radian) and height of WGS84 ellipsoid.
  • HeadingPitchRoll The rotation (radian) of the local axis in the northeast-upward frame. The course revolves around the negative Z axis. Pitch is a rotation around the negative Y axis. Rolling is about the rotation of the positive X axis.
  • Quaternion 3-D rotation in 4D coordinates.

These are the basic types necessary to locate and locate Cesium objects in scenarios, and there are many useful transformation methods. See each type of document for more information.

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

Camera Control

Camera is an attribute in viewer.scene that controls the currently visible domain. We can control the camera by directly setting its position and direction, or by using the API provided by Cesium, which is designed to specify the change of the camera's position and direction over time.

Some of the most commonly used methods are as follows:

Further get API functionality and see these camera demos:

Let's try a way to jump the camera to New York. Initialize view using camera.setView(), and specify the location and direction of the camera using Cartesian 3 and HeadingpitchRoll:

// 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

Cameras are now positioned and directed to overlook Manhattan, and our view parameters are stored in an object that we can pass to other camera methods.

In fact, we can use this same perspective to update the effect of pressing the home button. We don't have to let it return to the default view of the Earth from a distance. We can rewrite the button to show us the initial view of Manhattan. We can adjust the animation by adding several options, then adding an event listener that cancels the default flight, and calling FlyTo() our Home perspective:

// 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;

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

Clock Control

Next, we configure the viewer's Clok and Timline to control the scene's schedule.

Here is clock's API

When used at a specific time, Cesium uses the Juland DATE type, which stores the number of days since noon on January 1 - 4712 (4713 BC). To improve accuracy, the class stores all parts of the date and second in separate components. In order to calculate security and represent jump seconds, dates are always stored in the International Atomic Time Standard.

Here's an example of how we set scenario time options:

// 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 rate, start and stop times of the scene animation, and tells the clock to loop back to start when the stop time arrives. It also sets the timeline control to the appropriate time range. Look at this. Clock sample code To test the clock settings.

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

Cesium Chinese Communication QQ Group: 807482793

This article is based on admin Creation, adoption Knowledge Sharing Signature 3.0 Mainland China Licensing Agreement License.
It can be reproduced and quoted freely, but the author should be signed and the source of the article should be indicated.

Tags: Javascript Attribute

Posted on Wed, 04 Sep 2019 21:03:11 -0700 by Paul15679