Diese Beschreibung setzt voraus, dass du die Grundlagen gelesen hast.

Kopiere die Dateien async.js, jsg.js und jsg3d.js in ein beliebiges Verzeichnis. Für die folgende Beschreibung wird angenommen, dass sich die Datei im selben Verzeichnis wie die Webseite befindet.

JavaScripts includen

Ich gehe hier davon aus, dass HTML-5 als Web-Standard verwendet wird. Damit sind die Includes einfach:

<script src="x.js"></script>
<script src="async.js"></script>
<script src="jsg.js"></script>
<script src="jsg3d.js"></script>

x.js enthält alle Browserabhängigen Funktionen für den Zugriff auf das DOM der Webseite und viele Hilfsfunktionen.

async.js ermöglicht das asynchrone Zeichnen. Dadurch bleibt der Browser während dem Zeichnen bedienbar. Es kann jederzeit eine andere Seite aufgerufen werden oder die Grösse der aktuellen Seite verändert werden usw.

jsg.js enthält alle 2D-Funktionen und ist die Basis für die Funktionen in der jsg3d.js Datei.

jsg3d.js enthält alle 3D-Funktionen und baut auf den Funktionen in der jsg.js Datei auf.

Wenn die Komprimierte Version included wird, sind alle JavaScripts in einer Datei vereint. Es reicht folgender Code:

<script src="jsg3dX.js"></script>

JsGraph3D-Objekt erzeugen

Erzeuge an einer beliebigen Stelle auf der Webseite ein JsGraph3D Objekt mit folgendem Code:

var g3d = NewGraph3D( { Width: '100%', Height: '75%' } );

Damit wird ein Canvas-Element erzeugt, welches die ganze Breite des Container-Elementes ausnutzt (100%) und die Höhe relativ zur Breite 75% beträgt. Dieses Element ist nun unsere Zeichenfläche. Die hier verwendeten Grössen sind Standard und könnten daher in diesem Beispieel auch weggelassen werden:

var g3d = NewGraph3D();

Das Zeichnen der Grafik in der DisplayList wird automatisch nach dem Laden der Seite und nach jeder Grössenänderung des Canvas veranlasst.

Erzeugen von Grafik-Elementen

Noch ist die DisplayList leer. Damit etwas gezeichnet wird, müssen Grafik-Elemente wie Flächen, Linien und Punkte erzeugt und der DisplayList hinzugefügt werden. Das Ganze macht man am besten in einer Funktion, im Beispiel MyGraphic, in welcher auch das JsGraph3D-Objekt erzeugt wird.

Aus einer 3D-Funktion, im Beispiel My3DFunc, können mit Hilfe von AddAreasFrom3DFunc() Flächen-Elemente erzeugt werden, welche in der DisplayList gespeichert werden. Das Resultat des folgenden Code-Abschnitts siehst du in der Grafik rechts, welche übrigens kein Bild ist, sondern die Ausgabe des Codes.

Weitere Funktionen für das Hinzufügen von Grafik-Elementen zur DisplayList sind unter JsgDisplayList Funktionen aufgeführt.

MyGraphic( );

function MyGraphic( ) {
  var g3d = NewGraph3D( { Wdith: '100%', Height: '56.25%' } );
  g3d.AddAreasFrom3DFunc( { Func: My3DFunc } );
}

function My3DFunc( x, y ) {
  var r2 = x * x + y * y;
  var z = 0.5 * (-r2 + 1) + 0.3 * x * Math.sin( Math.PI * y * 1.5 );
  return [ x, y, z ];
}

Die von der Funktion My3DFunc berechneten 3D-Punkte werden automatisch zu Flächen verbunden, welche in der DisplayList abgespeichert werden. Die Parameter x und y werden von der Funktion AddAreasFrom3DFunc() in einem Raster generiert. Durch Einfügen weiterer Parameter bei der Funktion AddAreasFrom3DFunc() können Wertebereich, Schrittweite und weitere Optionen eingestellt werden.

Kamera positionieren

Nun möchte ich den Blickwinkel ändern, so dass die Funktion von schräg oben betrachtet werden kann. Dazu kann ich entweder die JsgCamera Funktionen verwenden oder wie nachfolgend gezeigt die entsprechenden Parameter gleich beim Erzeugen des JsGraph3D-Objektes mit NewGraph3D() mitgeben. Die verwendbaren Parameter sind bei der Funktion NewGraph3D() beschrieben.

Weitere Funktionen zum Einstellen der Kamera sind unter JsgCamera Funktionen aufgeführt.

function MyGraphic( ) {

  var g3d = NewGraph3D( {
    Width: '100%', Height: '56.25%',
    CamViewCenter: [0,0,-0.25],
    CamHAng: 30,
    CamVAng: 15
  } );

  g3d.AddAreasFrom3DFunc( { Func: My3DFunc } );
}

Rahmen um die Grafik zeichnen

Ein Rahmen um die Grafik kann entweder gezeichnet werden, indem einem Container-Element ein entsprechender Rahmen per CSS gegeben wird oder indem wie im Beispiel ein Rahmen per Parameter der Funktion NewGraph3D() definiert wird. Die Strichdicke des Rahmens wird mit der Option BorderWidth in Pixeln angegeben und die Farbe mit der Option BorderColor als String im CSS-Format für Farben.

Hinweis: Die Beispiele auf dieser Seite haben standardmässig einen grauen Rahmen, weil der Standardwert für die Rahmendicke 1 Pixel ist und in einem Style der Seite für JsGraph Elemente die graue Farbe für Rahmen als Standardwert definiert ist.

function MyGraphic( ) {

  var g3d = NewGraph3D( {
    Width: '100%', Height: '56.25%',
    BorderWidth: 2,
    BorderColor: 'blue',
    CamViewCenter: [0,0,-0.25 ],
    CamHAng: 30,
    CamVAng: 15
  } );

  g3d.AddAreasFrom3DFunc( { Func: My3DFunc } );
}