inf-schule | Interaktive Elemente

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"):

Beispielquelltext für die Einbindung des Pixeleditors über das Meta-Tag features

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>