STL Viewer
Der STL Viewer bietet die Möglichkeit stl-Dateien auf inf-schule einzubinden.
Das Modul einbinden
Um den STL Viewer nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features
erfolgen (siehe auch Abschnitt "Javascript"):
Das Modul verwenden
Die Verwendung des STL Viewers wird über einen HTML-Tag gesteuert, hier ein Beispiel:
<div class="stlviewer" data-filename="wuerfel.stl" data-config='{"x":50 , "y":50, "mouse_zoom":false, "auto_rotate":true, "bgcolor":"#EEEEEE"}'></div>
Konfiguration vornehmen
data-filename
- Hier kann eine Datei übergeben werden, aus der das Bild geladen wird.
data-config
- Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig
-
color
Farbcode für das Objekt (Standardwert: #909090). -
bgcolor
Farbcode für den Hintergrund (Standardwert: transparent). -
rotationx, rotationy, rotationz
Startrotation des Objektes angegeben im Bogenmaß. -
x, y
Kameraposition. -
mouse_zoom
Kann auf false gesetzt werden, dann ist kein Zoom mit der Maus möglich. -
auto_rotate
Kann auf true gesetzt werden, dann dreht sich das Objekt selbstständig. -
display
Kann auf flat, smooth oder wireframe gesetzt werden (Standardwert: flat). -
height
Ändert die Höhe des Viewers, die Breite ist immer 100% (Standardwert: 500px).
Beispiel mit Objektfarbe
<div class="stlviewer" data-filename="zylinder.stl" data-config='{"x":"50" , "y":"10", "color":"#FFB100"}'></div>
Beispiel mit Hintergrundfarbe und Auto-Rotation, ohne Zoom
<div class="stlviewer" data-filename="wuerfel.stl" data-config='{"x":"50" , "y":"50", "mouse_zoom":"false", "auto_rotate":"true", "bgcolor":"#FFEEEE"}'></div>
Beispiel mit Startrotation und verringerter Höhe auf 200px
<div class="stlviewer" data-filename="teekanne.stl" data-config='{"rotationx":"-0.8", "rotationz":"-0.3", "display":"smooth", "height":"200px"}'></div>
Beispiel mit Startrotation, display wireframe und verringerter Höhe auf 200px
<div class="stlviewer" data-filename="teekanne.stl" data-config='{"rotationx":"-0.8", "rotationz":"-0.3", "display":"wireframe", "height":"200px"}'></div>