Code

<jscript>

var GlobeModel = {
  HAng: 0,
  VAng: 0,
  Dist: 100,
  Scale: 5,
  Rot: 0,
  graph: null,

  Update: function( field ) {
    ControlPanels.Update();
    this.Draw( this.graph );
  },

  Draw: function( g ) {
    g.Reset3D( true );  // clear graphic
    g.SetAngleMeasure( 'deg' );

    var alpha = Math.acos( EarthMap.Radius / this.Dist );
    var scale = this.Scale * EarthMap.Radius / Math.cos( Math.PI/2 - alpha );
    g.SetCameraScale( scale );
    g.SetCameraView( [0,0,0], this.HAng, this.VAng, this.Dist );

    var VpScaleArgs = true;
    var VpClip      = false;
    var VpLeft      = 8;
    var VpTop       = 8;
    var VpRight     = -8;
    var VpBottom    = -8;
    g.SetViewport( VpLeft, VpTop, VpRight, VpBottom, VpScaleArgs, VpClip );
    g.SetWindowToCameraScreen();
    g.SetCameraClipping( 0.001 );

    EarthMap.SetLandColor( 'Antarctica', '#ddd', '#bbb' );

    g.TransRotateVect3D( [0,0,1], this.Rot );
    g.TransRotateVect3D( [1,-1,0], -23.4 );
    g.TransMove3D( -1, -1, 1 );
    EarthMap.Trans = g.Trans3D;
    g.ResetTrans3D();

    EarthMap.DrawGlobe( g );
    g.SetAreaAttr( 'black', 'black' );
    g.SetAlpha( 0.5 );
    EarthMap.DrawGlobeShadow( g, [1,-1,0], 0 );
    EarthMap.DrawGlobeGrid( g );
    g.SetAlpha( 1 );

    g.TransRotateVect3D( [0,0,1], this.Rot + 180 );
    g.TransRotateVect3D( [1,-1,0], 23.4 );
    g.TransMove3D( -1, 1, -1 );
    EarthMap.Trans = g.Trans3D;
    g.ResetTrans3D();

    EarthMap.DrawGlobe( g );
    g.SetAreaAttr( 'black', 'black' );
    g.SetAlpha( 0.5 );
    EarthMap.DrawGlobeShadow( g, [1,-1,0], 0 );
    EarthMap.DrawGlobeGrid( g );
    g.SetAlpha( 1 );
  },

};

GlobeModel.graph = NewGraphX3D( {
  Id: 'GlobeModelCanvas',
  Width: '100%',
  Height: '56%',
  DrawFunc: function(g){ GlobeModel.Draw(g); },
  AutoReset: false,
  AutoClear: false,
  AutoScalePix: true
} );

ControlPanels.NewSliderPanel( { 
  ModelRef: 'GlobeModel',
  NCols: 2, 
  ValuePos: 'left',
  OnModelChange: function(field){ GlobeModel.Update(field); }, 
  Format: 'fix0', 
  Digits: 1,
  ReadOnly: false, 
  PanelFormat: 'InputShortWidth'

} ).AddValueSliderField( {
  Name: 'HAng',
  Min: -180,
  Max: 360+180

} ).AddValueSliderField( {
  Name: 'VAng',
  Min: -89.9,
  Max: 89.9

} ).AddValueSliderField( {
  Name: 'Dist',
  Digits: 0,
  Min: 1.5,
  Max: 100

} ).AddValueSliderField( {
  Name: 'Scale',
  Digits: 0,
  Min: 2.2,
  Max: 10

} ).AddValueSliderField( {
  Name: 'Rot',
  Digits: 0,
  Min: -180,
  Max: 360+180

} ).Render();

xOnLoad( function(){ GlobeModel.Update(); } );

</jscript>