i

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> 

Suche

v
17.6.3.4.6
inf-schule.de/infschule/dokumentation/kapitel-erstellen/interaktive-elemente/stl-viewer
inf-schule.de/17.6.3.4.6
inf-schule.de/@/page/1dPkfr9JD0Yladmg

Rückmeldung geben