Diese Demo zeigt das Zeichnen auf verschiedenen Ebenen im 3D-Raum.
Mit den obigen Schiebereglern wird die Position der Kamera eingestellt:
Der Zoom wird automatisch so berechnet, dass die Ebene im Schnitt gleich gross dargestellt wird.
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();