Diese Demo zeigt das Zeichnen auf verschiedenen Ebenen im 3D-Raum.

JsGraph Ausgabe

Mit den obigen Schiebereglern wird die Position der Kamera eingestellt:

• HAng: Horizontaler Winkel der Kamera in der XY-Ebene gemessen von der X-Achse
• VAng: Vertikaler Winkel der Kamera gemessen von der XY-Ebene
• Dist: Distanz der Kamera vom Zentrum des Koordinatensystems
• Scale: Bereich, den die Kamera einfangen soll (Zoom)

Der Zoom wird automatisch so berechnet, dass die Ebene im Schnitt gleich gross dargestellt wird.

Code

var Model = {
  HAng: 15,
  VAng: 15,
  Dist: 2500,
  Scale: 600
};

function UpdateAll() {
  Form1.Update();
  Graph1.Redraw();
}

var DrawBorder = 1;
var FillArea   = 2;
var ClosePath  = 4;

var Graph1 = NewGraphX3D( { DrawFunc: Draw, AutoScalePix: true, ScaleRef: 600 } );

function Draw( g ) {

  // Kamera Einstellungen
  g.SetCameraScale( Model.Scale );
  g.SetCameraView( [0,0,0], Model.HAng, Model.VAng, Model.Dist );
  g.SetWindowToCameraScreen();

  // YZ-Ebene
  g.SetPlane( [0,-300,-200], [0,1,0], [0,0,1] );

  // Ebenen-Rahmen zeichnen
  g.SetLineAttr( 'gray', 2 );
  g.RectWHOnPlane( 0, 0, 600, 400, 1 );

  // Figur auf YZ-Ebene zeichnen
  g.SetAreaAttr( 'green', 'red', 4 );
  g.OpenPath3D();
  g.MoveToOnPlane( 100, 100 );
  g.LineToOnPlane( 500, 100 );
  g.LineToOnPlane( 300, 200 );
  g.Path3D( DrawBorder + FillArea + ClosePath );

  g.SetAreaAttr( 'yellow', 'blue', 2 );
  g.SetAlpha( 0.8 );
  g.OpenPath3D();
  g.CircleOnPlane( 300, 200, -180 );
  g.EllipseOnPlane( 300, 200, 240, 80, 45 );
  g.EllipseOnPlane( 300, 200, 240, 80, -45 );
  g.Path3D( DrawBorder + FillArea );

  // XZ-Ebene 
  g.SetPlane( [0,0,0], [-1,0,0], [0,0,1] );

  // Ebenen-Rahmen zeichnen und vertikale Achse zeichnen
  g.SetLineAttr( 'gray', 2 );
  g.RectOnPlane( -300, -200, 300, 200, 1 );
  g.SetLineAttr( 'gray', 1 );
  g.LineOnPlane( 0, -200, 0, 200 );

  // Halbkreis zeichnen
  g.SetAreaAttr( 'blue', 'red', 2 );
  g.SetAlpha( 0.5 );
  g.ArcOnPlane( 0, 0, 50, 90, 270, 3 );
  g.SetAlpha( 1 );

  // XY-Ebene
  g.SetPlane( [0,0,0], [1,0,0], [0,1,0] );

  // Ebenen-Rahmen zeichnen und horizontale Achsen zeichnen
  g.SetLineAttr( 'gray', 2 );
  g.RectOnPlane( new JsgRect( -300, -300, 600, 600 ), 1 );
  g.SetLineAttr( 'gray', 1 );
  g.LineOnPlane( -300, 0, 300, 0 );
  g.LineOnPlane( 0, -300, 0, 300 );

  // Koordinaten-Pfeile und Beschriftungen
  g.SetMarkerAttr( 'Arrow1', 8, 'black', 'black', 2 );
  g.Arrow3D( [0,0,0], [100,0,0] );
  g.Arrow3D( [0,0,0], [0,100,0] );
  g.Arrow3D( [0,0,0], [0,0,100] );
  g.SetTextAttr( 'Arial', 15, 'black', 'bold' );
  g.Text3D( 'X', [120,0,0] );
  g.Text3D( 'Y', [0,120,0] );
  g.Text3D( 'Z', [0,0,120] );

}

// Schieberegler erzeugen

var Form1 = ControlPanels.NewSliderPanel( { 
  ModelRef: 'Model',
  NCols: 2, 
  ValuePos: 'left',
  OnModelChange: UpdateAll, 
  Format: 'fix0', 
  Digits: 1,
  ReadOnly: true, 
  PanelFormat: 'InputShortWidth'
} );

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

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

Form1.AddValueSliderField( {
  Name: 'Dist',
  Digits: 0,
  Min: 500,
  Max: 5000
} );

Form1.AddValueSliderField( {
  Name: 'Scale',
  Digits: 0,
  Min: 500,
  Max: 1000
} );

Form1.Render();