WaBis

walter.bislins.ch

JSGX3D: JsGraphX3D

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

JsGraphX3D Klasse

Ein Objekt der Klasse JsGraphX3D wird mit der Funktion NewGraphX3D() erzeugt.

JsGraphX3D : JsGraph = {
Camera: JsgCamera; ReadOnly; Init = ResetCamera()
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.

JsGraphX3D Properties

Camera Bestimmt die Viewing-Transformation, sowie Zoom
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 JsGraphX3D Objekt direkt zugeriffen werden.

Properties anderer 3D-Klassen

JsGraphX3D Funktionen

NewGraphX3D() Erzeugt ein JsGraphX3D Objekt
Reset3D() Setzt das JsGraphX3D Objekt zurück
SaveAll() Speichert den Zustand des JsGraphX3D in einem Objekt
SetAll() Lädt den Zustand des JsGraphX3D aus einem Objekt
SetWindowToCameraScreen() Setzt das Window auf die bei der Camera definierte ScreenSize
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

NewGraphX3D()

NewGraphX3D( Parameters )

Parameters: JsGraphX3DDef; Optional; Default = { }
Enthält Werte für alle Attribute, welche nicht ihre Standardwerte bekommen sollen
Return: JsGraphX3D

Erzeugt ein JsGraphX3D 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 NewGraphX3D() können folgende Einstellungen vorgenommen werden. Alle nicht definierten Parameter erhalten Standardwerte.

JsGraphX3DDef

JsGraphX3DDef = {
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
DrawFunc: Function or null; Init = null
Function(JsGraph), in welcher die Grafik gezeichnet wird → SetDrawFunc()
DeferedDrawFunc: Function or null; Init = null
Function(JsGraph), die mit der Verzögerung DeferedDrawTime nach der DrawFunc gerufen wird → SetDeferedDrawFunc()
DeferedDrawTime: Integer(>0); Init = 50
Verzögerung zwischen dem Aufruf von DrawFunc und DeferedDrawFunc.
BeforeResetFunc: Function or null; Init = null
Function(JsGraph), welche vor der DrawFunc und gerufen wird, noch bevor intern die Funktion Reset() gerufen wird.
AutoReset: boolean; Init = true
Wenn true wird vor dem Aufruf der DrawFunc die Funktion Reset() gerufen.
HighResolution: Boolean; Init = true
true → Zeichnet auf Retina-Displays in hoher Auflösung (langsamer).
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()
Plane: JsgPlane; Optional; Default = new JsgPlane([0,0,0],[0,1,0],[0,0,1])
Ebene für die JsgPlane FunktionenSetPlane()
JsgCamera Properties...: SetCamera()
}

JsGraphX3D.Camera

JsGraphX3D.Camera: JsgCamera; ReadOnly;JsgCamera Funktionen

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

JsGraphX3D.Plane

JsGraphX3D.Plane: JsgPlane; ReadOnly;JsgPlane Funktionen

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

JsGraphX3D.Poly3D

JsGraphX3D.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();

JsGraphX3D.Trans3D

JsGraphX3D.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:

JsGraphX3D.Reset3D()

JsGraphX3D.Reset3D( reset2D, clear )

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

Setzt alle Properties und deren Objekte des JsGraphX3D Objektes auf den Init-Zustand zurück.

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.

JsGraphX3D.SaveAll()

JsGraphX3D.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:

JsGraphX3D.SetAll()

JsGraphX3D.SetAll( Params )

Params: Object

Setzt die internen Objekte Clip-Planes, Camera und Plane auf die in Params gespeicherten Werte. Properties, die in Params nicht definiert sind, behalten ihren aktuellen Wert.

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

JsGraphX3D.SetWindowToCameraScreen()

JsGraphX3D.SetWindowToCameraScreen( )

Nach dem Setzen des Viewports z.B. mit SetViewport() sollte das Window mit dieser Funktion auf die JsgCamera.ScreenSize gesetzt werden, damit die Grafik in diesen Bereich abgebildet wird.

g.SetCamera( ... );
g.SetViewport( vpXmin, vpYmin, vpWidth, vpHeight );
g.SetWindowToCameraScreen();
// Grafik mit den 3D-Funktionen zeichnen

JsGraphX3D.ResetTrans3D()

ResetTrans3D( clearStack )

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

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.

JsGraphX3D.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.

JsGraphX3D.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.

JsGraphX3D.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.

JsGraphX3D.TransMove3D()

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

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

Addiert eine Verschiebung zur aktuellen 3D-Transformation.

JsGraphX3D.TransScale3D()

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

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

Addiert eine Skalierung zur aktuellen 3D-Transformation

JsGraphX3D.TransRotateX3D(), TransRotateY3D(), TransRotateZ3D()

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

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

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

JsGraphX3D.TransRotateVect3D()

TransRotateVect3D( vect, angle )

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

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

JsGraphX3D.AddTrans3D()

AddTrans3D( mat )

mat: JsgMat3 or null
Return this: JsGraphX3D

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

JsGraphX3D.TransPoint3D()

JsGraphX3D.TransPoint3D( x, y, z )
JsGraphX3D.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().

JsGraphX3D.VTransPoint3D()

JsGraphX3D.VTransPoint3D( x, y, z )
JsGraphX3D.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().

JsGraphX3D.TransClipPoint3D()

JsGraphX3D.TransClipPoint3D( x, y, z )
JsGraphX3D.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().

JsGraphX3D.IsPointInsideClipRange3D()

JsGraphX3D.IsPointInsideClipRange3D( x, y, z )
JsGraphX3D.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 Montag, 15. Februar 2016
von wabis
Zum Seitenanfang
Geändert Sonntag, 8. Oktober 2017
von wabis