Search code examples
cesiumjs

Is it possible to shift the Cesium globe to the right of center?

Is it possible to shift the globe to the left or right of center? I would like to display the starfield below a transparent navigation sidebar, and shift-right the globe a distance equal to the width of the sidebar.

I can't find any examples of this, and I don't see reference to existing methods in Cesium. I experimented with making the Cesium div larger than its container and using positioning to make the globe appear to be shift to the right, but this showed blurring of the starfield due to the enlargement.

Solution

  • Yes, from the UI this is done by holding the SHIFT key and dragging, but in code it can be done with the lookLeft and lookRight methods on the camera.

    For example:

    viewer.camera.lookLeft(Cesium.Math.toRadians(20));

    Here's a more complete example, press "Run Code Snippet" at the bottom of this:

    var viewer = new Cesium.Viewer('cesiumContainer', {
    // All these construction options are just to avoid Stack Snippet error messages.
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
    imageryProvider : Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }),
    baseLayerPicker : false,
    geocoder : false,
    infoBox : false
});

// This changes where the Earth is seen by the camera.
viewer.camera.lookLeft(Cesium.Math.toRadians(20));
    html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}
    <link href="http://cesiumjs.org/releases/1.55/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.55/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>