Feature Showcase

Alle 11 Hintergruende

Dasselbe Modell (Sphere) mit jedem verfuegbaren Hintergrund-Preset.

Dark (Standard)

data-background="dark"

Light

data-background="light"

Studio

data-background="studio"

Warm

data-background="warm"

Ocean

data-background="ocean"

Sunset

data-background="sunset"

Forest

data-background="forest"

Night

data-background="night"

Neon

data-background="neon"

Transparent

data-background="transparent"

Camera (Webcam)

data-background="camera"

Alle 8 Materialien / Farben

Verschiedene Farb-Presets fuer unterschiedliche Produktdarstellungen.

Standard Blau #4fc3f7

data-color="#4fc3f7"

Gold #FFD700

data-color="#FFD700"

Silber #C0C0C0

data-color="#C0C0C0"

Rose #e91e63

data-color="#e91e63"

Orange #ff9800

data-color="#ff9800"

Gruen #66bb6a

data-color="#66bb6a"

Lila #9c27b0

data-color="#9c27b0"

Rot #f44336

data-color="#f44336"

Alle 10 Demo-Modelle

Jedes Modell mit individuellem Hintergrund und Farbe.

Cube

light / blau

Sphere

studio / silber

Cylinder

dark / gruen

Ring

warm / gold

Vase

sunset / orange

Gear

night / silber

Star

neon / gelb

Pyramid

forest / braun

Spring

ocean / cyan

Chess Pawn

studio / weiss

Produkt-Galerie Demo

So koennte ein Online-Shop mit 3D-Produktvorschau aussehen.

Designer Vase "Rosa"

49,90 €

Goldring "Elegance"

189,00 €

Industrie-Zahnrad M12

24,50 €

Schachfigur Bauer (Holz)

12,90 €

Deko-Stern "Nacht"

15,90 €

Druckfeder 20mm

3,20 €

Einbindungs-Beispiele

Copy & Paste - fertig. Keine Abhaengigkeiten, kein Build-System.

HTML - Einfache Einbindung

Script laden, Container einfuegen. Fertig!

<!-- Script einmal laden -->
<script src="stl-viewer.js"></script>

<!-- Viewer einfuegen -->
<div data-stl-viewer
     data-stl="produkt.stl"
     data-color="#4fc3f7"
     data-background="studio"
     style="width:100%;height:500px">
</div>

WordPress Shortcode

In jede Seite oder jeden Beitrag einfuegen:

[stl_viewer
  stl="https://example.com/modell.stl"
  height="500px"
  color="#FFD700"
  background="warm"
  autorotate="true"
  grid="true"]

JavaScript API

Viewer programmatisch steuern:

// Viewer-Instanz holen
const container = document.querySelector('[data-stl-viewer]');
const viewer = container.__stlViewer;

// Modell laden
viewer.loadModel('neues-modell.stl');

// Farbe aendern
viewer.setColor('#ff9800');

// Hintergrund wechseln
viewer.setBackground('sunset');

// Screenshot erstellen
viewer.screenshot();

Mehrere Viewer

Beliebig viele Viewer auf einer Seite:

<!-- Script NUR EINMAL laden -->
<script src="stl-viewer.js"></script>

<!-- Viewer 1 -->
<div data-stl-viewer
     data-stl="ring.stl"
     data-background="warm"
     data-color="#FFD700"></div>

<!-- Viewer 2 -->
<div data-stl-viewer
     data-stl="vase.stl"
     data-background="studio"
     data-color="#e91e63"></div>

<!-- Viewer 3 -->
<div data-stl-viewer
     data-stl="gear.stl"
     data-background="dark"
     data-color="#C0C0C0"></div>

Tastaturkuerzel

Alle verfuegbaren Shortcuts fuer schnelles Arbeiten.

Taste	Funktion
`R`	Ansicht zuruecksetzen (Reset)
`F`	Vollbildmodus ein/aus (Fullscreen)
`G`	Gitter ein/aus (Grid)
`W`	Wireframe ein/aus
`A`	Auto-Rotation ein/aus
`S`	Screenshot speichern
`E`	Kanten anzeigen (Edges)
`M`	Material wechseln
`B`	Hintergrund wechseln
`L`	Beleuchtung wechseln (Lighting)
`+` / `-`	Zoom rein / raus
`↑` `↓` `←` `→`	Modell drehen
`Shift` + Pfeiltasten	Modell verschieben (Pan)
`1` - `6`	Vordefinierte Kamerawinkel (vorne, hinten, links, rechts, oben, unten)
`Space`	Animation pausieren / fortsetzen
`H`	UI ein-/ausblenden
`?`	Hilfe anzeigen