WaBis

walter.bislins.ch

JSG3D: jsGraph3D

Mit dem Erzeugen eines Objektes der Klasse JsGraph3D mit der Funktion NewGraph3D() wird ein Canvas erzeugt, auf dem 3D-Grafik mit Hilfe der JsGraph3D Funktionen gezeichnet werden kann.

JsGraph3D Klasse

Ein Objekt der Klasse JsGraph3D wird mit der Funktion NewGraph3D() erzeugt.

JsGraph3D : JsGraph = {
ShowProgress: Boolean; Init = true
SyncMode: Boolean; ReadOnly; Init = false → SetSyncMode()
DrawFunc3D: Function; ReadOnly; Init = null → SetDrawFunc()
BeforeDrawFunc: Function; Init = null
AfterDrawFunc: Function; Init = null
DefaultEleData: JsgEleData; ReadOnly; Init = new JsgEleData()
Camera: JsgCamera; ReadOnly; Init = ResetCamera()
Scene: JsgScene; ReadOnly; Init = NewScene()
DisplayList: DisplayList; ReadOnly; Init = NewDisplayList()
Plane: JsgPlane; ReadOnly; Init = → SetPlane()
Poly3D: JsgPolygon; ReadOnly; Init = → NewPoly3D()
Trans3D: JsgMat3 or null; ReadOnly
}

Für die Beschreibung der Properties der Basis-Klasse JsGraph siehe JsGraph Properties.

JsGraph3D Properties

ShowProgress Bestimmt, ob der Fortschritt der Berechnungen angezeigt werden soll oder nicht
SyncMode Bestimmt, ob die Grafik in einem Rutsch oder asynchron in vielen kleinen unterbrechbaren Schritten berechnet und gezeichnet werden soll
DrawFunc3D Diese Funktion wird gerufen, wenn die Grafik neu gezeichnet werden muss (nach dem Laden der Seite, bei einem Resize usw.)
BeforeDrawFunc Diese Funktion wird vor DrawFunc3D gerufen
AfterDrawFunc Diese Funktion wird nach DrawFunc3D gerufen
DefaultEleData Standard-Daten für Ausehen und Verhalten von Grafik-Elementen
Camera Bestimmt die Viewing-Transformation, sowie Zoom und Blende
Scene Enthält die verschiedenen Beleuchtungsquellen einer 3D Szene
DisplayList Speichert alle Grafik Elemente und ihre Koordinaten
Plane Bezugsebene für die JsgPlane Funktionen
Poly3D JsgPolygon, welches von den Funktionen NewPoly3D(), AddPointToPoly3D(), DrawPoly3D() usw. verwendet wird.
Trans3D 3D-Transformation

Properties der Basis-Klasse JsGraph

Für Properties der Basis-Klasse JsGraph siehe JsGraph Properties. Auf diese Properties kann über das JsGraph3D Objekt direkt zugeriffen werden.

Properties anderer 3D-Klassen

JsGraph3D Funktionen

NewGraph3D() Erzeugt ein JsGraph3D Objekt
DrawGraph3D() Standard Draw-Funktion für DrawFunc3D
Reset3D() Setzt das JsGraph3D Objekt zurück
SaveAll() Speichert den Zustand des JsGraph3D in einem Objekt
SetAll() Lädt den Zustand des JsGraph3D aus einem Objekt
StopDrawing() Bricht das Zeichnen der Display-Liste ab
SetSyncMode() Setzt das Property SyncMode
SetDrawFunc() Installiert eine Zeichenfunktion
ResetTrans3D() Setzt die aktuelle 3D-Transformation zurück
SaveTrans3D() Speichert die aktuelle 3D-Transformation im Transformations-Stack
RestoreTrans3D() Entnimmt die zuletzt gespeicherte 3D-Transformation aus dem Transformations-Stack und macht sie zur aktuellen Transformtion
SetTrans3D() Setzt eine neue 3D-Transformation
TransMove3D() Addiert eine Verschiebung zur aktuellen 3D-Transformation
TransScale3D() Addiert eine Skalierung zur aktuellen 3D-Transformation
TransRotateX3D(),
TransRotateY3D(),
TransRotateZ3D()
Addiert eine Rotation zu aktuellen 3D-Transformation
TransRotateVect3D() Addiert eine Rotation um einen Vektor zur aktuellen 3D-Transformation
AddTrans3D() Addiert eine Transformation zur aktuellen 3D-Transformation
TransPoint3D() applies Trans3D to a point
VTransPoint3D() applies Trans3D and Camera-Trans to a point
TransClipPoint3D() applies Trans3D, clipps, and applies Camera-Trans on unclipped points
IsPointInsideClipRange3D() check ob punkt innerhalb aller Clipp-Bereiche liegt

Funktionen anderer 3D-Klassen

NewGraph3D()

NewGraph3D( Parameters )

Parameters: JsGraph3DDef; Optional; Default = { }
Enthält Werte für alle Attribute, welche nicht ihre Standardwerte bekommen sollen, siehe NewGraph3D() (Ziel-SeiteJSG3D: Vorlagen)
Return: JsGraph3D

Erzeugt ein JsGraph3D Objekt mit zugehörigen HTML-Elementen (Canvas) und initialisiert die Transformationen. Der Aufruf dieser Funktion muss an der Stelle im HTML Dokument stehen, wo der Canvas gezeichnet werden soll.

Mit Parameters können Grundeinstellungen vorgenommen werden:

Im Argument der Funktion NewGraph3D() können folgende Einstellungen vorgenommen werden. Alle nicht definierten Parameter erhalten Standardwerte.

JsGraph3DDef

JsGraph3DDef = {
Id: String; Optional; Default = 'JsGraph<n>'
HTML-ID für den Canvas, wobei <n> eine laufende Nummer ab 1 ist
Width: Integer(>1) or String; Optional; Default = '100%'
Breite des Div-Elementes in Pixel oder Prozent. Für Pixel-Angaben kann eine ganze Zahl oder ein String übergeben werden, für Prozent-Angaben muss ein String der Form '100%' angegeben werden. 100% Breite entspricht der Breite des übergeordnete Container-Elements.
Height: Integer(>1) or String; Optional; Default = '75%'
Höhe des Div-Elementes in Pixel oder Prozent der Breite. Für Pixel-Angaben kann eine ganze Zahl oder ein String übergeben werden, für Prozent-Angaben muss ein String der Form '33%' übergeben werden. Die Höhe bezieht sich auf die Breite des Canvas und wird dynamisch angepasst bei einem Resize des Browser-Fensters.
BorderWidth: Integer(>0); Optional; Default = 0
Breite des Rahmens um den Canvas in Pixel
BorderColor: String; Optional; Default = ''
Farbe des Rahmens, falls BorderWidth > 0 ist. Wenn nicht angegeben, gilt die Standardfarbe der Klasse JsGraph
GraphClass: String; Optional; Default = 'JsGraph'
Der Grafik-Container erhält diese Klasse. Die inneren Elemente erhalten davon abgeleitet Klassen
GraphFormat: String; Optional; Default = ''
Zusätzliche Klasse für den Container, z.B: 'VMargin' für einen Abstand oben und unten zu anderen Elementen
DrawFunc3D: Function; Optional; Default = DrawGraph3D()
DrawFunc3D( JsGraph3D ), in welcher die Grafik gezeichnet wird.
BeforeDrawFunc: function; Optional; Default = null
BeforeDrawFunc( JsGraph3D ), die vor dem Zeichnen der DisplayList gerufen wird
AfterDrawFunc: function; Optional; Default = null
AfterDrawFunc( JsGraph3D ), die nach dem Zeichnen der DisplayList gerufen wird
ScaleRef: Integer(>0); Optional; Default = 800
Referenzbreite des Containers in Pixel → SetScaleRef()
AutoScalePix: Boolean; Optional; Default = false
true → Skaliert Pixelwerte entsprechend ScaleRef → ScalePix()
LimitScalePix: Boolean; Optional; Default = true
true → Skalierung vergrössert nicht, verkleinert nur → ScalePix()
ScalePixInt: Boolean; Optional; Default = false
true → automatisches ScalePix() liefert immer ganze Zahlen
MinLineWidth: Number(>0); Optional; Default = 0.25
Minimale Strickdicke bei automatischem ScalePix()
MinTextSize: Number(>0); Optional; Default = 1
Minimale Textgrösse bei automatischem ScalePix()
MinMarkerSize: Number(>0); Optional; Default = 1
Minimale Grösser der Markersymbole bei automatischem ScalePix()
DefaultAttrs: Object; Optional; Default = {}
Standardwerte für diverse Attribute → SetAttrs()
Plane: JsgPlane; Optional; Default = new JsgPlane([0,0,0],[0,1,0],[0,0,1])
Ebene für die JsgPlane FunktionenSetPlane()
JsgCamera Properties...: SetCamera()
JsgEleData Properties...: JsgEleData()
JsgLightSource Properties...: SetLight()
}

Die Funktion DrawFunc3D() wird immer dann gerufen, wenn die Grafik neu gezeichnet werden muss. Standardmässig wird die vordefinierte Funktion DrawGraph3D() aufgerufen.

var g = NewGraph3D( { Width: 800, Height: 600, DrawFunc: Draw } );

function Draw( g3d ) {
  g3d.DrawDisplayList();
}

DrawGraph3D()

DrawGraph3D( g3d )

g3d: JsGraph3D

Diese Funktion wird als Standard DrawFunc3D bei der Funktion NewGraph3D() verwendet und entspricht dem Aufruf:

g3d = NewGraph3D( { DrawFunc: DrawGraph3D });

Die Funktion DrawGraph3D ist wiefolgt definiert:

function DrawGraph3D( g3d ) {
  g3d.DrawDisplayList();
}

JsGraph3D.ShowProgress

JsGraph3D.ShowProgress: Boolean; Init = true 

Wenn SyncMode false ist, bestimmt ShowProgress, ob der Fortschritt der Berechnungen im Zeichenfenster angezeigt werden soll oder nicht.

JsGraph3D.SyncMode

JsGraph3D.SyncMode: Boolean; ReadOnly; Init = false;SetSyncMode()

Bestimmt, ob die Berechnungen und das Zeichnen in einem Rutsch synchron durchgeführt werden sollen (SyncMode = true) oder asynchron in kleinen unterbrechbaren Schritten (SyncMode = false). Im asynchronen Modus wird der Fortschritt der Berechnungen angezeigt, wenn ShowProgress true gesetzt ist.

JsGraph3D.DrawFunc3D

JsGraph3D.DrawFunc3D: Function(JsGraph3D) or DrawGraph3D() or null; ReadOnly; Init = null;SetDrawFunc()

Funktion, welche nach dem Laden der Seite oder bei einem Resize gerufen wird. Es kann die vordefinierte Funktion DrawGraph3D() verwendet werden, welche einfach nur die DisplayList neu zeichnet.

Dieses Property kann bei der Funktion NewGraph3D() oder mit SetDrawFunc() gesetzt werden.

JsGraph3D.BeforeDrawFunc

JsGraph3D.BeforeDrawFunc: Function(JsGraph3D) or null; Init = null 

Funktion, welche vor dem Zeichnen der Display-List in der Funktion DrawDisplayList() aufgerufen wird.

Dieses Property kann bei der Funktion NewGraph3D() und DrawDisplayList() gesetzt werden.

JsGraph3D.AfterDrawFunc

JsGraph3D.AfterDrawFunc: Function(JsGraph3D) or null; Init = null 

Funktion, welche nach dem Zeichnen der Display-List in der Funktion DrawDisplayList() aufgerufen wird.

Dieses Property kann bei der Funktion NewGraph3D() und DrawDisplayList() gesetzt werden.

JsGraph3D.DefaultEleData

JsGraph3D.DefaultEleData: JsgEleData; ReadOnly;SetDefaultEleData()

In diesem Property sind Standard-Daten abgespeichert, welche das Aussehen und Verhalten von Grafik-Elementen bestimmen, denen kein eigenes JsgEleData Objekt zugewiesen wird.

JsGraph3D.Camera

JsGraph3D.Camera: JsgCamera; ReadOnly;JsgCamera Funktionen

Bestimmt die Abbildungs-Transformation von 3D zu 2D aus Position und Blickrichtung, sowie Zoom und Blende.

JsGraph3D.Scene

JsGraph3D.Scene: JsgScene; ReadOnly;JsgScene Funktionen

Enthält die verschiedenen Beleuchtungs-Quellen einer 3D Szene.

JsGraph3D.DisplayList

JsGraph3D.DisplayList: JsgDisplayList; ReadOnly;JsgDisplayList Funktionen

Speichert alle Grafik Elemente und ihre Koordinaten.

JsGraph3D.Plane

JsGraph3D.Plane: JsgPlane; ReadOnly;JsgPlane Funktionen

Die JsgPlane Funktionen beziehen sich auf die in Plane definierte 3D-Ebene. Sie kann mit SetPlane() definiert werden.

JsGraph3D.Poly3D

JsGraph3D.Poly3D: JsgPolygon; ReadOnly; Init = new JsgPolygon 

Dieses Polygon kann für das punktweise Erzeugen eines Polygons verwendet werden. Die folgenden Funktionen greifen auf dieses Polygon zu:

Das Polygon kann vor dem Zeichnen mit JsgPolygon.Invert() und JsgPolygon.Roll() wiefolgt manipuliert werden:

g.NewPoly3D();
for (x = 0; x < xmax; x += xdelta) {
  var y = f( x );
  g.AddPointToPoly3D( x, y );
}
g.Poly3D.Roll( n );
g.Poly3D.Invert();
g.DrawPoly3D();

JsGraph3D.Trans3D

JsGraph3D.Trans3D: JsgMat3 or null; ReadOnly; Init = null 

Wenn Trans3D nicht null ist sondern eine JsgMat3-Matrix, werden 3D-Grafik-Elemente vor dem Zeichnen über diese Matrix transformiert. Die folgenden Funktionen definieren die Transformation:

JsGraph3D.Reset3D()

JsGraph3D.Reset3D( reset2D, clear )

reset2D: Boolean; Optional; Default = true
clear: Boolean; Optional; Default = true

Setzt mit Ausnahme von DrawFunc3D alle Properties und deren Objekte auf den Init-Zustand zurück. DrawFunc3D behält den Wert und muss mit SetDrawFunc() explizit geändert werden, falls nötig.

Wenn reset2D = true ist, wird die Funktion Reset() des 2D-Teils dieser Klasse aufgerufen, wobei diese jedoch kein Clear() ausführt. Setze dazu clear auf true.

Wenn clear = true ist, wird die Funktion Clear() aufgerufen, welche die Grafik auf dem Display löscht.

JsGraph3D.SaveAll()

JsGraph3D.SaveAll( Params )

Params: Object; Optional
Return: Params or Object

Speichert alle internen Objekte und Zustände in Params ab. Wenn Params nicht angegeben wird oder null ist, wird ein neues Objekt zum Speichern angelegt und zurückgegeben. Mit der Funktion SetAll() können alle internen Objekte und Zustände wieder auf die im Objekt gespeicherten Werte gesetzt werden.

Zu den gespeicherten Objekten gehören:

JsGraph3D.SetAll()

JsGraph3D.SetAll( Params )

Params: Object

Setzt alle internen Objekte (Clip-Planes, DefaultEleData, Camera, Scene, DisplayList und Plane) und Zustände auf die in Params gespeicherten Werte. Properties, die in Params nicht definiert sind, erhalten den Init-Wert, mit Ausnahme des Properties DrawFunc3D, welches in diesem Falle den aktuellen Wert beibehält. DrawFunc3D kann mit der Funktion SetDrawFunc() verändert werden.

Das Objekt Params kann mit der Funktion SaveAll() erstellt werden.

JsGraph3D.SetDrawFunc()

JsGraph3D.SetDrawFunc( DrawFunc3D )

DrawFunc3D: Function or null
DrawFunc3D( JsGraph3D ) = Funktion, in welcher die Grafik gezeichnet wird.

Setzt, ersetzt oder löscht die DrawFunc3D Funktion. Eine DrawFunc3D Funktion kann auch direkt bei NewGraph3D() festgelegt werden.

JsGraph3D.StopDrawing()

JsGraph3D.StopDrawing( )

Bricht das Zeichnen der Display-Liste ab. Diese Funktion wird intern im JsGraph Objekt installiert und bei jedem Resize des Canvas gerufen. Danach wird ein Draw der Display-List angestossen, um die Grafik in der neuen Grösse zu zeichnen.

JsGraph3D.SetSyncMode()

JsGraph3D.SetSyncMode( Mode )

Mode: Boolean
Return: Boolean

Setzt das Property SyncMode und gibt den vorherigen Wert zurück.

JsGraph3D.ResetTrans3D()

ResetTrans3D( clearStack )

clearStack: Boolean; Optional; Default = false
Return this: JsGraph3D

Setzt die aktuelle 3D-Transformation zurück.

Alle Grafik wird vor dem Zeichnen einer allenfalls definierten 3D-Transformation unterzogen. Diese Transformation kann mit den nachfolgenden Funktionen definiert werden.

3D-Transformationen können auf dem Transformations-Stack zwischengespeichert werden, siehe SaveTrans3D(). Wenn clearStack = true ist, wird dieser Stack gelöscht.

JsGraph3D.SaveTrans3D()

SaveTrans3D( reset )

reset: Boolean; Optional; Default = false
Return: JsgMat3
Kopie der aktuellen Transformation

Speichert eine Kopie der aktuellen 3D-Transformation im Transformations-Stack und gibt eine Referenz auf diese Kopie zurück.

Wenn reset = true ist, wird die aktuelle Transformation mit ResetTrans3D() zurückgesetzt auf die Einheits-Transformation.

JsGraph3D.RestoreTrans3D()

RestoreTrans3D( )

Entnimmt die zuletzt gespeicherte 3D-Transformation aus dem Transformations-Stack und macht sie zur aktuellen Transformtion.

Wenn der Transformation-Stack leer ist, macht diese Funktion nichts.

JsGraph3D.SetTrans3D()

SetTrans3D( mat, useMat )

mat: JsgMat3 or null
useMat: Boolean; Optional; Default = false

Setzt eine neue 3D-Transformation. Wenn mat undefiniert oder null ist, wird die 3D-Transformation auf die Einheits-Transformation zurückgesetzt.

Wenn mat definiert ist, wird diese Matrix zur neuen Transformation. Die bisherige Transformation wird dadurch ersetzt.

Wenn useMat = false ist, wird eine Kopie von mat erstellt, sonst wird mat als neue Transformation gespeichert.

JsGraph3D.TransMove3D()

TransMove3D( vect )
TransMove3D( x, y, z )

vect: JsgVect3
x, y, z: Number
Return this: JsGraph3D

Addiert eine Verschiebung zur aktuellen 3D-Transformation.

JsGraph3D.TransScale3D()

TransScale3D( scale )
TransScale3D( sx, sy, sz )

scale: JsgVect3
sx, sy, sz: Number
Return this: JsGraph3D

Addiert eine Skalierung zur aktuellen 3D-Transformation

JsGraph3D.TransRotateX3D(), TransRotateY3D(), TransRotateZ3D()

TransRotateX3D( angle )
TransRotateY3D( angle )
TransRotateZ3D( angle )

angle: Number
in Grad oder Radian, siehe AngleMeasure
Return this: JsGraph3D

Addiert eine Rotation um eine Koordinaten-Achse zur aktuellen 3D-Transformation. Der Rotationswinkel wird je nach AngleMeasure in Grad oder Radian interpretiert.

JsGraph3D.TransRotateVect3D()

TransRotateVect3D( vect, angle )

vect: JsgVect3
angle: Number
in Grad oder Radian, siehe AngleMeasure
Return this: JsGraph3D

Addiert eine Rotation um einen Vektor zur aktuellen 3D-Transformation. Der Rotationswinkel wird je nach AngleMeasure in Grad oder Radian interpretiert.

JsGraph3D.AddTrans3D()

AddTrans3D( mat )

mat: JsgMat3 or null
Return this: JsGraph3D

Addiert die Transformation mat zur aktuellen 3D-Transformation. Von mat wird allenfalls eine Kopie erstellt.

JsGraph3D.TransPoint3D()

JsGraph3D.TransPoint3D( x, y, z )
JsGraph3D.TransPoint3D( p )

x, y, z: Number
p: JsgVect3
Returns this.WorkPoint3D: JsgVect3

Transformiert den Punkt p bzw. (x,y,z) mit der aktuellen Trans3D.

Das Resultat wird in einem Internen Point WorkPoint3D gespeichert. Von diesem muss eine Kopie mit JsgVect3.Copy() erstellt werden, wenn er nicht nur temporär benötigt wird.

Vergleiche auch VTransPoint3D() und TransClipPoint3D().

JsGraph3D.VTransPoint3D()

JsGraph3D.VTransPoint3D( x, y, z )
JsGraph3D.VTransPoint3D( p )

x, y, z: Number
p: JsgVect3
Returns this.Camera.WorkPoint: JsgVect3

Transformiert den Punkt p bzw. (x,y,z) mit der aktuellen Trans3D und danach mit der Camera-Transformation. Die X- und Y-Komponenten des resultierenden Punktes sind dann Punkte auf dem Display in Window-Koordinaten. Die Z-Komponente gibt den Abstand des Punktes vom Display in BlickrRichtung an und wird meist nicht benötigt, kann also ignoriert werden.

Das Resultat wird in einem Internen Point this.Camera.WorkPoint gespeichert. Von diesem muss eine Kopie mit JsgVect3.Copy() erstellt werden, wenn er nicht nur temporär benötigt wird.

Vergleiche auch TransPoint3D() und TransClipPoint3D().

JsGraph3D.TransClipPoint3D()

JsGraph3D.TransClipPoint3D( x, y, z )
JsGraph3D.TransClipPoint3D( p )

x, y, z: Number
p: JsgVect3
Returns this.Camera.WorkPoint or null: JsgVect3

Transformiert den Punkt p bzw. (x,y,z) mit der aktuellen Trans3D. Liegt der transformaierte Punkt ausserhalb einer Clipping-Plane, wird null zurückgegeben. Ansosten wird wird auf den Punkt auch noch die Kamera-Transformation angewandt.

Das Resultat wird in einem Internen Point this.Camera.WorkPoint gespeichert. Von diesem muss eine Kopie mit JsgVect3.Copy() erstellt werden, wenn er nicht nur temporär benötigt wird.

Vergleiche auch TransPoint3D() und VTransPoint3D().

JsGraph3D.IsPointInsideClipRange3D()

JsGraph3D.IsPointInsideClipRange3D( x, y, z )
JsGraph3D.IsPointInsideClipRange3D( p )

x, y, z: Number
p: JsgVect3
Returns: Boolean

Wenn der Punkt p bzw. (x,y,z) innerhalb aller Clipping-Planes liegt, wird true zurückgegeben, sonst false.

Siehe auch TransClipPoint3D().

Weitere Infos zur Seite
Erzeugt Mittwoch, 27. Januar 2016
von wabis
Zum Seitenanfang
Geändert Sonntag, 8. Oktober 2017
von wabis