Die folgende Vorlage ist ein Ausschnitt aus der Demo Seite.

#INCLUDE JsGraphX3D.inc
#INCLUDE ControlPanel.inc

<jscript>
var Model = {
  HAng: 0,
  VAng: 0,
  Dist: 100,
  Scale: 5,
  graph: null,

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

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

    g.SetCameraScale( this.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 );

    // draw some 3D graphic
 
  },

};

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

ControlPanels.NewSliderPanel( { 
  ModelRef: 'ModelPanel',
  NCols: 2, 
  ValuePos: 'left',
  OnModelChange: function(field){ Model.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

} ).Render();

xOnLoad( function(){ Model.Update(); } );
</jscript>